What's difference between $(element).append() and element.insertAdjacentHTML
dom, html, javascript, jquery
Solution
Well, unless you're targeting older than `Chrome 1.0`, `Firefox 8.0`, `IE 4.0`, `Opera 7.0`, or `Safari 4.0`, it's safe to use `insertAdjacentHTML`. jQuery may solve any inconsistencies between browsers that could occur, but it also requires a whole library for this one operation. If you're already using jQuery, stick with jQuery methods. If you're not using jQuery and are wondering if it would be beneficial to start using it just for this method, then don't bother.
In terms of "better", like I said, either should be pretty consistent/reliable across browsers, but `insertAdjacentHTML` is a native DOM method that is straight to the point and doesn't require extra code (like jQuery uses)...meaning it should be "faster".
`.append()` accepts multiple types of parameters (HTML string, DOM element, jQuery object, or even arrays/object literals containing these things)...and internally, `.append()` uses `Element.appendChild`. `insertAdjacentHTML` only accepts an HTML string.
Based on that, it may or may not affect your decision.
References:
- `element.insertAdjacentHTML()` - https://developer.mozilla.org/en-US/docs/DOM/element.insertAdjacentHTML
- `$.append()` - http://api.jquery.com/append/
Problem
which have better performance? Dom ``` element.insertAdjacentHTML('afterend', '<div id="two">two</div>'); ``` Jquery ``` $(element).append('<div id="two">two</div>') ```