How to Replace Text and DOM Elements in jQuery
- Replace Text and DOM Elements in jQuery
-
Use the
replace()Method to Replace Text in jQuery -
Use the
replaceAll()Method to Replace DOM Elements in jQuery -
Use the
replaceWith()Method to Replace DOM Elements in jQuery
jQuery has different methods to perform the replace functionality. This tutorial demonstrates how to replace text or DOM elements in jQuery.
Replace Text and DOM Elements in jQuery
jQuery has functionalities to replace a string with another or a DOM element with another. The replace() method can replace a string in a sentence or group of strings.
The replace() method can only replace the first instance. If we want to replace all the string occurrences, a global modifier is used.
Similarly, jQuery offers a method to replace the DOM element with another. The methods replaceAll(), and replaceWith() can be used to replace DOM elements.
The replaceAll() method can replace each target element with a set of elements. The replaceWith() method can replace each element with the new content; it will return the set of removed elements.
The syntaxes for these methods are:
-
To replace a text using the
replace()method:string.replace (/[old string]/+/g, 'new string') -
To replace a target element using the
replaceAll()method:$(content).replaceAll(selector) -
To replace the selected content using the
replaceWith()method:$(selector).replaceWith(content, function(index))Where
gin thereplace()method represents the global modifier. Thecontentis mandatory in each method, which will specify if the input is a string, HTML elements, or jQuery objects.The
function(index)is optional, which specifies the content to be replaced. Let’s try examples for each method.
Use the replace() Method to Replace Text in jQuery
As mentioned above, the replace() method can be used to replace a string or substring. Let’s try an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery Replace() Method</title>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".SubElement span").text(function (index, text) {
return text.replace("delftstack", "www.delftstack.com");
});
});
</script>
<style>
#MainDiv {
width: 800px;
height: 400px;
background-color: lightblue;
padding-top: 30px;
padding-left: 10px;
font-size: 40px;
text-align: center;
color: black;
}
</style>
</head>
<body>
<div id="MainDiv">
<div class="SubElement">
<h2 style="color: green;">
jQuery Replace() Method Example
</h2>
<hr />
<br />
<span>Hello, This is delftstack</span>
</div>
</div>
</body>
</html>
The code above will replace the delftstack from the span to the www.delftstack.com. See output:
Use the replaceAll() Method to Replace DOM Elements in jQuery
The replaceAll() method will replace each element with the set of matched elements. Let’s try an example:
<!DOCTYPE html>
<html>
<head>
<title>jQuery ReplaceAll Method</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
$(document).ready(function () {
$("button").click(function () {
$("<p>The Paragraph is replaced</p>").replaceAll("p");
});
});
</script>
<style>
#MainDiv {
width: 800px;
height: 400px;
background-color: lightblue;
padding-top: 30px;
padding-left: 10px;
font-size: 30px;
text-align: center;
color: black;
}
</style>
</head>
<body>
<div id="MainDiv">
<h2>jQuery ReplaceAll Method</h2>
<p>This is paragraph One</p>
<p>This is paragraph Two</p>
<p>This is paragraph Three</p>
<button>Click to see change</button><br />
</div>
</body>
</html>
The code above will replace all the paragraphs in the given div with the given paragraph. See output:
Use the replaceWith() Method to Replace DOM Elements in jQuery
The replaceWith() method is used to replace each element in the set of matched elements with the given new content. See example:
<!DOCTYPE html>
<html>
<head>
<title>jQuery ReplaceWith() Method</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
$(document).ready(function () {
$("button").click(function () {
$("#DemoPara").replaceWith("www.delftstack.com");
});
});
</script>
<style>
#MainDiv {
width: 800px;
height: 400px;
background-color: lightblue;
padding-top: 30px;
padding-left: 10px;
font-size: 30px;
text-align: center;
color: black;
}
</style>
</head>
<body>
<div id="MainDiv">
<h2>jQuery ReplaceWith Method Example</h2>
<hr />
<br />
<p id="DemoPara">delftstack</p>
<button id="button">Click here to replace the selected element</button>
</div>
</body>
</html>
The code above will replace the content from the selected element. This example replaces the content from the paragraph to www.delftstack.com.
See output:
Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.
LinkedIn Facebook