Can somebody tell what is the difference between jquery .html() function and innerHTML?
<script type="text/javascript">
$(document).ready(function(){
$('#test_link').click(function(){
//$('#div_test_out').html("<div width='250px' height='100px' id='div_test'><script language='javascript'>alert('insider');<\/script>asddsa</div>");
document.getElementById('div_test_out').innerHTML="<div width='250px' height='100px' id='div_test'><script language='javascript'>alert('insider');<\/script>asddsa</div>";
});
});
</script>
<a href="#" id="test_link" >TEST LINK :-)</a><br/><br/>
<div width="100px" height="100px" id="div_test_out"></div>
When I use first option, that is jQuery, script inside runs, and alert shows up, but if I use second option that with the innerHTML (which I though is the same and there is no difference between them), script is not working ;-(
What could be the cause?
All HTML elements have inner HTML properties. The . html() jQuery method retrieves the HTML content of the first element in the particular set of matched elements. Remember: jQuery innerHTML does not exist as a function.
It then adds them to the DOM separately in a manner that causes their execution. .html() implicitly causes a few operations (script handling being one) whereas writing to innerHTML simply causes the innerHTML to change, but very little is done with that HTML.
Answer : appendChild is used to insert new node in DOM. innerHTML is a property of DOM that allows to replace content of an element with different HTML, which automatically gets parsed into DOM nodes.
innerText returns all text contained by an element and all its child elements. innerHtml returns all text, including html tags, that is contained by an element.
jQuery's .html() method is a multipurpose function for accessing and manipulating innerHTML. When used as a setter, it returns the jQuery collection for chaining. When used as a getter, it returns the markup representation of the collection elements' innards.
When you use it as a setter--to write markup into an element--jQuery reads the markup and extracts scripts from within. It then adds them to the DOM separately in a manner that causes their execution. .html() implicitly causes a few operations (script handling being one) whereas writing to innerHTML simply causes the innerHTML to change, but very little is done with that HTML.
Setting the innerHTML
property does not execute scripts.
jQuery contains special code to execute scripts for you.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With