Updated April 10, 2023
Introduction to jQuery replace div contents
The jQuery replace div contents is the data contents that can be used on the <div> tag and replacing the contents wherever we needed using jQuery method like replaceWith() or any other replace methods we want to replace the datas that can be covered on the innerHTML using the div element or any other html elements. The data contents are declared and passed it as the innerHTML tags like <div> tag and it is to be calling on the jQuery selector while the replaceable contents is to be inserted on the DOM level using jQuery replace child methods like replaceWith() the contents are splitted and replaced with the new datas.
Syntax
The jQuery library has many default methods and classes, widgets for used on creating the web based application. The HTML will combine with jQuery for adding the data contents on the both script and UI code. Mostly the <div> element will have parameter like id and some other child tags by using the id or the div element as the jQuery selector and calling the methods like replaceWith() etc.
<html>
<head>
<script src=https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js>
</script>
</head>
<body>
<div id="demo">
<div class="name">
---Datas with html tags if needed ---
</div>
</div>
<script>
$("name").click(function(e){
e.preventDefault();
var eg=;
$('#demo').replaceWith('<div class="name">' + eg + '</div>');
});
</script>
</body>
</html>The above codes are the basic syntax for utilising the <div> tag and replaceWith() method on the html page.
How to replace div contents in jQuery?
The above paragraph in syntax section we discussed on the <div> tag in html page. We used n number of <div> tags based on the UI needs we called the div tag elements on the each other section of the html page. But the id of the <div> tag element is to be passing on the jQuery selector once we passed the datas are pulled to the jQuery library. We can declare the replaced values as the separate variable and the variable is to called on the replaceWith() method. The method will contain both <div> tag elements and replaced text or variable as the parameter arguments. The elements from the html will replaced with the DOM level so after replacement operation the one DOM element is to be replaced with another DOM Element. When we declared any return type that time it returns the parent Node property the parent node of the specific defined node as the Node object, in case there is no parent it returns null value. It can also possible for to replace the child Nodes which is having no parent Node on the script. The function which replaces the inner contents of the selected html div elements however we can add the html tags using inside with the help of html() method for to replace the selected HTML element.
Examples of jQuery replace div contents
Here are the following examples mention below
Example #1
Code:
<!DOCTYPE html>
<html>
<head>
<title> Welcome to My Domain it’s a first Example for div tag using jQuery Replace concept</title>
<style>
body {
display: block;
margin-top: 17%;
}
h1 {
color:blue;
text-align:center;
}
div { border:3px green;
color:violet;
margin:7px;
cursor:pointer;
}
p { border:3px green;
color:blue;
margin:3px;
cursor:pointer;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body bgcolor="red">
<p>Have a Nice Day Users</p>
<p>Thank you spending you time in our application kindly stay on this</p>
<p>Please find the below our Updates on this application</p>
<p>The div tag data contents are used and shown on the screen by using the html web pages</p>
<p>With the help of jQuery replaceWith() method the datas are replaced with the new html dom elements</p>
<div>Your replaced contents will be shown on the web screen</div>
<script>
$("p").click(function () {
$(this).replaceWith($("div"));
});
</script>
</body>
</html>Output:
In the above example, we used the div contents with the replaceWith() method for replacing the one dom element with another element.
Example #2
Code:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Welcome To My Domain its a Second Example for replacing the elements by using the div tag elements</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<style>
body {
font-family: Arial, TimesNewRoman,Helvetica, sans-serif;
background-color: blue;
color: green;
text-decoration: none;
padding: 23px 33px;
position: center;
display: inline-block;
border-radius: 5px;
}
.demo {
position: center;
top: -23px;
right: -23px;
padding: 7px 13px;
border-radius: 47%;
background-color: pink;
color: yellow;
}
</style>
<script type="text/javascript" language="javascript">
$(function () {
$("#first").click(function () {
$("#demo").html($("#demo").html().replace("Welcome", "raman"));
});
});
</script>
</head>
<body>
<div id="demo">Welcome
<div class=”name”>
Welcome Users its the second example for replacing div contents by using the jQuery replace() method its one of the scenario we used
</div>
<div class="name">
Welcome Raman Have a Nice Day Thank you for spending the time for this occasion
</div>
<div class="name">
Welcome Siva Have a Nice Day Thank you for spending the time for this occasion
</div>
</div><br />
<input id="first" type="button" value="Replace Value" />
</body>
</html>Output:
In the second example, we used the html contents on the page additionally the button element was used on the script to replace the specific contents on the web page.
Example #3
Code:
<!DOCTYPE html>
<html>
<head>
<title>Welcome to My Domain it’s a Third Example for regarding the div contents on the replace method</title>
<style>
img {
width: 540px;
height: 530px;
}
</style>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<script src="https://code.jquery.com/jquery-3.5.0.min.js">
</script>
<script type="text/javascript" language="javascript">
$(function () {
$("#first").click(function () {
$("#demo").html($("#demo").html().replace("Welcome you", "raman"));
});
});
</script>
</head>
<body>
<div id="demo">Welcome you users
<div class="name">
<img id="second" src='website.jpg' alt="values" />
<marquee>Thank you users have a nice day</marquee>
</div>
</div>
<input id="first" type="button" value="Replace Value" />
<script>
$(document).ready(function() {
$('img').on({
'click': function() {
let vars = ($(this).attr('src') === 'one.jpg') ?
'website.jpg' :
'one.jpg';
$(this).attr('src', vars);
}
});
});
</script>
</body>
</html>Output:
In the final example, we used additional images in the script for changing the images when we click the image on the page. Also, we click the button for replacing the contents.
Conclusion
In jQuery library has default methods and keywords for creating a web application with user-friendly nature. Additionally, the html elements like <div> tag and other tag elements are combined and called the data contents to the jQuery selectors for performing the operations like replace() the contents from one DOM element to the another DOM element.
Recommended Articles
This is a guide to jQuery replace div contents. Here we discuss How to replace div contents in jQuery along with the examples and outputs. You may also have a look at the following articles to learn more –
