Jquery HTML() VS. Innerhtml

JQuery html() vs. innerHTML

To answer your question:

.html() will just call .innerHTML after doing some checks for nodeTypes and stuff. It also uses a try/catch block where it tries to use innerHTML first and if that fails, it'll fallback gracefully to jQuery's .empty() + append()

HTML.innerHTML vs Jquery.html() - Javascript execution

If go a bit deeper in jQuery source code, we can find html method.

In this method exist next line

this.empty().append( value );

If now go to append, we can find next

append: function() {
    return domManip( this, arguments, function( elem ) {
        if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) {
            var target = manipulationTarget( this, elem );
            target.appendChild( elem );
        }
    } );
}

So, now find domManip. Inside this function from html-string builded fragmen, and if fragment have script tag execute next code

DOMEval( node.textContent.replace( rcleanScript, "" ), doc );

Where DOMEval

function DOMEval( code, doc ) {
    doc = doc || document;

    var script = doc.createElement( "script" );

    script.text = code;
    doc.head.appendChild( script ).parentNode.removeChild( script );
}

So, at least, we find place where execute scripts.

---

So, why in some case html run script and otherwise not?

This depends on input string and what return buildFragment function.

Inside buildFragment we can found next line

tmp.innerHTML = wrap[ 1 ] + jQuery.htmlPrefilter( elem ) + wrap[ 2 ];

where elem is input string, and jQuery.htmlPrefilter is next function

htmlPrefilter: function( html ) {
    return html.replace( rxhtmlTag, "<$1></$2>" );
}

so, input string just replaced with some regular exporession rxhtmlTag.

rxhtmlTag = /<(?!area|br|col|embed|hr|img|input|link|meta|param)(([a-z][^\/\0>\x20\t\r\n\f]*)[^>]*)\/>/gi,

So, just try this for checking string:

console.log(jQuery.htmlPrefilter("<iframe><iframe //><script>alert(1)</" + "script>"));console.log(jQuery.htmlPrefilter("<iframe><iframe> // <script>alert(1)</" + "script>"));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>

Difference between innerHTML and .html() from jQuery

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.

.append VS .html VS .innerHTML performance

That benchmark is worthless. innerHTML is always faster than DOM manipulation.

jQuery seems faster because it prepares a string with all the HTML first while the others do one operation each iteration. Also note that jQuery.html() uses innerHTML whenever it can.

jQuery from benchmark

var html = '';
for (var i = 0; i < len; i++) {
  html += '<div>Test ' + i + '</div>';
}

$('#list').html(html);

innerHTML from benchmark

var list = document.getElementById('list');
for (var i = 0; i < len; i++) {
  list.innerHTML = list.innerHTML + '<div>Test ' + i + '</div>';
}

---

The test for innerHTML would be a lot faster if it was written like:

var list = document.getElementById('list');
var html = '';

for (var i = 0; i < len; i++) {
    html += '<div>Test ' + i + '</div>';
}

list.innerHTML = html;

http://jsben.ch/#/yDvKH

When do I use .val() vs .innerHTML?

.val() is used to get/replace input elements values in jQuery, alternative in JS is .value.

innerHTML or jQuery's .html() is used to get/replace the whole markup inside an element, not input elements.

text() is used almost the same as JS innertHTML, only it gets/replaces the text inside an element, not all the tags etc. It's bassically the equivalent of JS innerText

Reference links about innerHTML, innerText, val(), text(), html()

jQuery .html vs .text

JQuery's html function only accepts strings or a function as it's parameter - and was throwing an error for me when I tried to pass in an array.

If you require the comma to be kept, and are intent or using JQuery (or require more granular control over how the array is output) you are better off converting your array into a string first using .join(), ie:

$("#write").html(myArray.join(", "))

JQuery .html vs .attr('innerHTML')

The second option, will create an attribute (if it doesn't exist) called 'innerHTML' on the dom element with id 'myE' and set the value to contents. The first option will set the html content of the dom element with id 'myE' to whatever contents actually is.

The first option will result in

<div id="myE">
  whatever the value of 'contents' is
</div>

The second option will result in (if 'myE' is a div)

<div id="myE" innerHTML="whatever_contents_value_is">
...
</div>

How to replace innerHTML of a div using jQuery?

$("#regTitle").html("Hello World");

---

Related Topics