- 1 year ago
jquery load specific html content from child element
To load specific HTML content from a child element using jQuery, you can use the load()
method along with a selector to target the desired element. Here's an example:
HTML:
html<div id="parent">
<h1>Title</h1>
<p>Some content here</p>
<div id="child">
<p>Specific content to load</p>
</div>
</div>
JavaScript:
javascript$(document).ready(function() {
// Load specific content from the child element
$('#parent').load('yourpage.html #child');
});
In the above example, the load()
method is called on the #parent
element. The first argument of load()
is the URL or file path from which to load content. In this case, you can replace 'yourpage.html'
with the appropriate URL or file path. The second argument is the selector (#child
) to specify which element's content should be loaded.
By using the selector #child
in the load()
method, only the content inside the #child
element will be loaded and inserted into the #parent
element.
Make sure to include the jQuery library in your HTML file before using jQuery functions.
Please note that when using the load()
method, the loaded content will replace the existing content of the target element. If you want to append the content instead of replacing it, you can use the append()
method instead of load()
.
javascript$(document).ready(function() {
// Append specific content from the child element
$('#parent').append($('#child').html());
});
This will append the HTML content of the #child
element to the #parent
element, preserving any existing content.