今天我们来继续来复习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知识,微信搜索【小帅的编程笔记】,每天更新