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知识，微信搜索【小帅的编程笔记】，每天更新