快捷導(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明顯不合適了, 所以通過查找資料, 封裝一個(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;
};

測試下效果

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的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

動態(tài)加載js的方法匯總
這篇文章主要介紹了動態(tài)加載js的方法,實(shí)例匯總了常見的幾種動態(tài)加載技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-02-02
原生js實(shí)現(xiàn)手風(fēng)琴效果
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)手風(fēng)琴效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-09-09
js 編程筆記無名函數(shù)
無名函數(shù)，其中一個(gè)作用可能是生成新的函數(shù)對象的引用，主要是用于定義。
2011-06-06
js模仿jquery的寫法示例代碼
jquery的寫法從事web開發(fā)的人員應(yīng)該不會陌生吧，下面我們要說的是使用js模仿jquery寫法的實(shí)現(xiàn)代碼，感興趣的朋友可以參考下哈，希望對大家有所幫助
2013-06-06
使用bootstrap validator的remote驗(yàn)證代碼經(jīng)驗(yàn)分享(推薦)
這篇文章主要介紹了使用bootstrap validator的remote驗(yàn)證器驗(yàn)證經(jīng)驗(yàn)分享(推薦)的相關(guān)資料,本文介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-09-09
JS給Textarea文本框添加行號的方法
這篇文章主要介紹了JS給Textarea文本框添加行號的方法,涉及javascript針對頁面元素結(jié)點(diǎn)的讀取與判定技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-08-08
BootStrap表單寬度設(shè)置方法
這篇文章主要介紹了BootStrap表單寬度設(shè)置方法,僅僅是小編日常遇到問題記錄，寫的不好還請見諒，需要的朋友可以參考下
2017-03-03
微信小程序?qū)崿F(xiàn)文字跑馬燈
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)文字跑馬燈，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-12-12
js判斷某個(gè)方法是否存在實(shí)例代碼
這篇文章主要介紹了js判斷某個(gè)方法是否存在的實(shí)例代碼,可用于檢測js中的方法是否可用,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-01-01
前端跨域問題解決及七大跨域原理詳解
這篇文章主要為大家介紹了前端跨域問題的解決及七大跨域原理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-02-02