快捷導(dǎo)航

JS實(shí)現(xiàn)jQuery的append功能

更新時(shí)間：2021年05月28日 10:44:45 作者：Beater

jQuery中可以直接使用$el.append()為元素添加字符串型dom, 但是最近轉(zhuǎn)戰(zhàn)Vue, 再使用jQuery明顯不合適了, 所以通過(guò)查找資料, 封裝一個(gè)可以實(shí)現(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;
};

測(cè)試下效果

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

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

另一種方法

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

瀏覽器的渲染的效果：

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

以上就是JS實(shí)現(xiàn)jQuery的append功能的詳細(xì)內(nèi)容，更多關(guān)于JS 實(shí)現(xiàn)jQuery append的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

echarts設(shè)置暫無(wú)數(shù)據(jù)方法實(shí)例及遇到的問(wèn)題
Echarts是百度旗下的一款開(kāi)源的商業(yè)級(jí)數(shù)據(jù)可視化產(chǎn)品,具有豐富的圖表類(lèi)型,下面這篇文章主要給大家介紹了關(guān)于echarts設(shè)置暫無(wú)數(shù)據(jù)方法及遇到的問(wèn)題的相關(guān)資料,需要的朋友可以參考下
2022-12-12
發(fā)表文章時(shí)自動(dòng)保存到剪貼板
發(fā)表文章時(shí)自動(dòng)保存到剪貼板...
2006-10-10
基于原生js運(yùn)動(dòng)方式關(guān)鍵點(diǎn)的總結(jié)(推薦)
下面小編就為大家?guī)?lái)一篇基于原生js運(yùn)動(dòng)方式關(guān)鍵點(diǎn)的總結(jié)(推薦)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-10-10
基于javascript原生判斷DOM是否加載完畢
這篇文章主要介紹了基于javascript原生判斷DOM是否加載完畢,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-10-10
JS精確判斷數(shù)據(jù)類(lèi)型代碼實(shí)例
這篇文章主要介紹了JS精確判斷數(shù)據(jù)類(lèi)型代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-12-12
js的2種繼承方式詳解
這篇文章主要介紹了javascript的2種繼承方式,分析對(duì)象冒充和原型鏈方式的不同,需要的朋友可以參考下
2014-03-03
JS實(shí)現(xiàn)支持Ajax驗(yàn)證的表單插件
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)支持Ajax驗(yàn)證的表單插件，感興趣的小伙伴們可以參考一下
2016-03-03
ListBox實(shí)現(xiàn)上移,下移,左移,右移的簡(jiǎn)單實(shí)例
這篇文章主要介紹了ListBox實(shí)現(xiàn)上移,下移,左移,右移的簡(jiǎn)單實(shí)例。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2014-02-02
精彩的Bootstrap案例分享重點(diǎn)在注釋!(選項(xiàng)卡、柵格布局)
這篇文章主要為大家分享了一個(gè)精彩的Bootstrap案例，涉及到了選項(xiàng)卡、柵格布局，關(guān)鍵重點(diǎn)在注釋?zhuān)信d趣的小伙伴們可以參考一下
2016-07-07
微信小程序多文件上傳 Tdesign及導(dǎo)入失敗問(wèn)題
小程序文件上傳還是有點(diǎn)麻煩的,其實(shí)主要還是小程序?qū)Φ慕涌谟兄T多的不便,比如說(shuō),文件不能批量提交,只能一個(gè)個(gè)的提交,小程序的上傳需要專(zhuān)門(mén)的接口,這篇文章主要介紹了微信小程序多文件上傳 Tdesign及導(dǎo)入失敗問(wèn)題,需要的朋友可以參考下
2023-11-11