JS實現(xiàn)jQuery的append功能
更新時間：2021年05月28日 10:44:45 作者：Beater
jQuery中可以直接使用$el.append()為元素添加字符串型dom, 但是最近轉(zhuǎn)戰(zhàn)Vue, 再使用jQuery明顯不合適了, 所以通過查找資料, 封裝一個可以實現(xiàn)同樣效果的方法.
Show Me The Code
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));
})
// 插入到最后 append
this.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);
效果
PS
另外, 如果想實現(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)注腳本之家其它相關(guān)文章！
相關(guān)文章
echarts設(shè)置暫無數(shù)據(jù)方法實例及遇到的問題
Echarts是百度旗下的一款開源的商業(yè)級數(shù)據(jù)可視化產(chǎn)品,具有豐富的圖表類型,下面這篇文章主要給大家介紹了關(guān)于echarts設(shè)置暫無數(shù)據(jù)方法及遇到的問題的相關(guān)資料,需要的朋友可以參考下2022-12-12
發(fā)表文章時自動保存到剪貼板...2006-10-10
基于原生js運動方式關(guān)鍵點的總結(jié)(推薦)
下面小編就為大家?guī)硪黄谠鷍s運動方式關(guān)鍵點的總結(jié)(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要介紹了基于javascript原生判斷DOM是否加載完畢,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-10-10
這篇文章主要介紹了JS精確判斷數(shù)據(jù)類型代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-12-12
這篇文章主要介紹了javascript的2種繼承方式,分析對象冒充和原型鏈方式的不同,需要的朋友可以參考下2014-03-03
這篇文章主要為大家詳細介紹了JS實現(xiàn)支持Ajax驗證的表單插件，感興趣的小伙伴們可以參考一下2016-03-03
ListBox實現(xiàn)上移,下移,左移,右移的簡單實例
這篇文章主要介紹了ListBox實現(xiàn)上移,下移,左移,右移的簡單實例。需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
精彩的Bootstrap案例分享 重點在注釋!(選項卡、柵格布局)
這篇文章主要為大家分享了一個精彩的Bootstrap案例，涉及到了選項卡、柵格布局，關(guān)鍵重點在注釋，感興趣的小伙伴們可以參考一下2016-07-07
微信小程序多文件上傳 Tdesign及導(dǎo)入失敗問題
小程序文件上傳還是有點麻煩的,其實主要還是小程序?qū)Φ慕涌谟兄T多的不便,比如說,文件不能批量提交,只能一個個的提交,小程序的上傳需要專門的接口,這篇文章主要介紹了微信小程序多文件上傳 Tdesign及導(dǎo)入失敗問題,需要的朋友可以參考下2023-11-11