HTMLElement.prototype.appendHTML = function(html) {let divTemp = document.createElement('div');let nodes = null;let fragment = document.createDocumentFragment();divTemp.innerHTML = html;nodes = divTemp.childNodes;nodes.forEach(item => {fragment.appendChild(item.cloneNode(true));})// 插入到最后 appendthis.appendChild(fragment);// 在最前插入 prepend// this.insertBefore(fragment, this.firstChild);nodes = null;fragment = null;};測試下效果

html

<style>.child { height: 50px; width: 50px; background: #66CCFF; margin-bottom: 1em;}</style><div id='app'> <div class='child'> <div class='child'></div>

js

let app = document.getElementById(’app’);let child = `<div class='child'>down</div>`;app.appendHTML(child);效果

另外, 如果想實現(xiàn)在上方插入的話, 只需要把代碼里的this.appendChild(fragment); 改為 this.insertBefore(fragment, this.firstChild);

var div2 = document.querySelector('#div2'); div2.insertAdjacentHTML('beforebegin','<p>hello world</p>');//在調(diào)用元素外部前面添加一個元素 div2.insertAdjacentHTML('afterbegin','<p>hello world</p>');//在調(diào)用元素的內(nèi)部添加一個子元素并取代了第一個子元素 div2.insertAdjacentHTML('beforeend','<p>hello world</p>');//在調(diào)用元素內(nèi)部后面添加一個子元素 即取代了最后的子元素 div2.insertAdjacentHTML('afterend','<p>hello world</p>');//在調(diào)用元素的外部后面添加一個元素

瀏覽器的渲染的效果：

此方法是ie 的最早的方法所以兼容性特別好

以上就是JS實現(xiàn)jQuery的append功能的詳細內(nèi)容，更多關(guān)于JS 實現(xiàn)jQuery append的資料請關(guān)注好吧啦網(wǎng)其它相關(guān)文章！