This publish illustrates all of the doable strategies to retrieve the outer HTML of a component.
How one can Retrieve the Outer HTML of an Ingredient Utilizing jQuery?
Use the jQuery built-in “prop()” methodology or the “outerHTML” property to retrieve the outer HTML of a component.
This part includes the sensible implementation of each these doable approaches to retrieve the outer HTML of a component.
Let’s begin with the sensible implementation.
HTML Code
First, take a look on the said HTML code:
<ul id=“list1”>
<li>Welcome</li>
<li>to</li>
<li>Linuxhint</li>
<li>web site</li>
</ul>
</div><br>
<p>Press F12 to open the net console.</p>
Within the above code snippet:
- Create a “<div>” factor having an id “Div1” and magnificence it with the assistance of the said model attributes i.e., top, width, and border.
- Contained in the “div”, the “<ul>” tag with an id “list1” provides an unordered listing with the given listing of things utilizing the “<li>” tag.
- Lastly, the “<p>” tag defines a paragraph assertion.
Be aware: The above specific HTML code is taken into account in all of the strategies of this publish.
Instance 1: Making use of the jQuery “prop()” Technique to Retrieve the Outer HTML of an Ingredient
The “prop()” is a helpful methodology that units and will get the properties and values of the desired HTML factor. Right here on this methodology, it’s used to retrieve the outer HTML of the goal “<div>” factor.
jQuery Code
Observe, the said jQuery code:
<script src=“https://unpkg.com/axios/dist/axios.min.js”></script>
<script>
$(doc).prepared(perform(){
var elem = $(‘#Div1’);
var html = elem.prop(‘outerHTML’);
console.log(html);
});
</script>
In keeping with the above code snippet:
- The primary “<script>” tag embeds the jQuery library CDN utilizing the “src” attribute from its official web site.
- The following “<script>” tag defines a small script part that first applies the “prepared()” methodology to execute the given perform when the given HTML doc will get prepared.
- Subsequent, the “elem” variable accesses the given “<div>” factor as a selector utilizing its id “Div1”.
- After that, the “html” variable applies the “prop()” methodology on the accessed “div” to get its outer HTML.
- Lastly, the “console.log()” methodology shows the “html” variable worth on the internet console.
Output
It’s verified that the net console reveals the outer HTML (innerHTML + factor itself) of the goal “<div>’” factor appropriately.
Instance 2: Making use of the jQuery “outerHTML” Property to Retrieve the Outer HTML of an Ingredient
The “outerHTML” property units and will get the HTML factor together with all its attributes, content material, and beginning and ending tags. On this situation, it’s utilized to get the outer HTML of the corresponding “<div>” factor.
jQuery Code
Overview of the given jQuery code:
<script src=“https://unpkg.com/axios/dist/axios.min.js”></script>
<script>
$(doc).prepared(perform(){
var elem = $(‘#Div1’);
var html = elem[0].outerHTML;
console.log(html);
});
</script>
Right here, the “html” variable applies the “outerHTML” property on all of the tags ranging from the “0” index inside the accessed “<div>” factor to get its outer HTML.
Output
Right here the net console efficiently reveals the outer HTML of the focused “<div>” factor.
Various Method
The person also can apply the “outerHTML” property on this means:
var elem = $(‘#Div1’);
var html = ”;
elem.every(perform(index, factor) {
html += factor.outerHTML;
});
console.log(html);
});
</script>
Within the above code strains, the “elem” variable is linked with the callback “every()” methodology to use the “outerHTML” property to every index worth of the goal “<div>” factor.
Output
The output is an identical to the primary one i.e., return the outer HTML of the corresponding “<div>” factor on the internet console.
Conclusion
To retrieve the outer HTML of a component utilizing jQuery, use the “prop()” methodology or the “outerHTML” property. Each approaches are fairly easy and straightforward. This publish briefly illustrated all of the doable strategies to retrieve the outer HTML of a component.
