快捷導(dǎo)航

JS小技巧之通過(guò)字符串追加元素

更新時(shí)間：2023年01月14日 17:14:11 作者：一只卑微的菜狗

這篇文章主要介紹了JS小技巧之通過(guò)字符串追加元素方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

JS通過(guò)字符串追加元素

原生JS中通過(guò)動(dòng)態(tài)的創(chuàng)建createElement，但是元素里面內(nèi)容較多，需要innerHTML賦值，在appendChild追加到父元素里面。

如下代碼：

// 動(dòng)態(tài)添加對(duì)象
// 1. 創(chuàng)建元素
var li = document.createElement('li');
// 2. 添加節(jié)點(diǎn)
li.innerHTML = text.value;
?
// 3.1 將一個(gè)節(jié)點(diǎn)添加到指定父節(jié)點(diǎn)的子節(jié)點(diǎn)列表末尾
ul.appendChild(li);
?
// 3.2 將一個(gè)節(jié)點(diǎn)添加到父節(jié)點(diǎn)的指定子節(jié)點(diǎn)前面
ul.insertBefore(li, ul.children[0]);

現(xiàn)在，高級(jí)的做法是利用insertAdjacentHTML()可以直接把字符串格式元素添加到父元素中。

// 這里的ul是父節(jié)點(diǎn)
var li = '<li class="liactive"><span>測(cè)試</span></li>';
ul.insertAdjacentHTML('beforeend', li);
?
// 第一個(gè)參數(shù)是插入的位置，該參數(shù)有以下四個(gè)值：
// beforebegin：插入到元素自身的前面
// afterbegin：插入元素內(nèi)部的第一個(gè)子節(jié)點(diǎn)之前
// beforeend：插入元素內(nèi)部的最后一個(gè)子節(jié)點(diǎn)之后
// afterend：插入到元素自身的后面

如appendChild的方法與insertAdjacentHTML()方法之間的區(qū)別在于：前者不支持追加字符串的子元素，后者支持