JS DOM 编程复习笔记 -- insertBefore、insertAfter、append、prepend（七）

今天我们来继续来复习DOM的一些插入方法，insertBefore()，append()和prepend()方法。前面我们只用到过一个appendChild()方法。我们一个个看语法和示例，包你看完就会。

`insertBefore()`

insertBefore()用来在指定的DOM节点前插入DOM元素。

语法：

parentNode.insertBefore(newNode, existingNode);

parentNode为existingNode的父节点

existingNode为已经存在的节点

newNode为新插入的节点，插入到existingNode的前面

工具函数

上面原生方法，可能还需要父节点，我们可以进行简单的封装使用

function insertBefore(newNode, existingNode) {existingNode.parentNode.insertBefore(newNode, existingNode);
}

例子

<ul id="menu"><li>产品</li>   <li>服务</li><li>联系我</li>
</ul><script>
let menu = document.getElementById('menu');
// 创建一个新的li节点
let li = document.createElement('li');
li.textContent = '首页';// 在第一个元素之前插入它
menu.insertBefore(li, menu.firstElementChild);
</script>

insertAfter()

JS DOM并没有insertAfter()这样一个方法，不过我们可以使用insertBefore()进行自己封装

工具函数

function insertAfter(newNode, existingNode) {existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling);
}

把existingNode的下一个兄弟节点作为参照元素，在其前面进行插入新节点

例子

<ul id="menu"><li>首页</li>   <li>服务</li><li>联系我</li>
</ul><script>
let menu = document.getElementById('menu');
// 创建一个新的li节点
let li = document.createElement('li');
li.textContent = '产品';// 在第一个元素之前插入它
menu.insertBefore(li, menu.firstElementChild.nextSibling);
</script>

append()

append()和我们之前用的appendChild()方法很相似，在一个父元素的最后插入元素

语法：

parentNode.append(...nodes);
parentNode.append(...DOMStrings);

append node节点示例

<ul id="app"><li>JavaScript</li>
</ul><script>
let app = document.querySelector('#app');let langs = ['TypeScript','HTML','CSS'];let nodes = langs.map(lang => {let li = document.createElement('li');li.textContent = lang;return li;
});app.append(...nodes);
</script>

最后页面的HTML将为

<ul id="app"><li>JavaScript</li><li>TypeScript</li><li>HTML</li><li>CSS</li>
</ul>

append DOMStrings 示例

<div id="app"></div><script>let app = document.querySelector('#app');app.append('append() 文本 Demo');console.log(app.textContent);// 输出：// append() 文本 Demo
</script>

最后页面的HTML将为

<div id="app">append() 文本 Demo</div>

append vs appendChild()

下面表格展示了 append() 和 appendChild()的区别:

Differences	`append()`	`appendChild()`
返回值	`undefined`	插入的 `Node` 对象
参数	多个 `Node` 对象	单个`Node` 对象
参数类型	允许 `Node` 或者 `DOMString`	`Node`

prepend()

和append()方法类似，prepend()用来在最前面插入元素

语法:

parentNode.prepend(...nodes);
parentNode.prepend(...DOMStrings);

prepend node节点

<ul id="app"><li>HTML</li>
</ul><script>let app = document.querySelector('#app');let langs = ['CSS','JavaScript','TypeScript'];let nodes = langs.map(lang => {let li = document.createElement('li');li.textContent = lang;return li;});app.prepend(...nodes);
</script>

输出HTML

<ul id="app"><li>CSS</li><li>JavaScript</li><li>TypeScript</li><li>HTML</li>
</ul>

prepend() DOMStrings

<div id="app"></div><script>let app = document.querySelector('#app');app.prepend('prepend() 文本 Demo');console.log(app.textContent);// 输出：// prepend() 文本 Demo
</script>

最终的HTML为

<div id="app">prepend() 文本 Demo</div>

总结

今天我们复习了insertBefore()，append()和prepend()方法，掌握DOM基础插入方法，走遍天下都不怕。

明天见。

如果你想跟着我一起复习DOM知识，微信搜索【小帅的编程笔记】，每天更新