JavaScript中的ParentNode.append

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2020/06/14/JavaScript%E4%B8%AD%E7%9A%84ParentNode-append/

摘要

本文主要讲述了：

作用
参数
返回值类型

正文

作用

在当前节点的最后一个子元素之后插入其他节点或字符串

如果传入的参数是节点，那么它的作用和Node.prototype.appendChild()非常相似
如果传入的参数是字符串，那么ParentNode.append()将把字符串转换为文本节点再插入

参数

可以接受多个参数，参数类型为节点或字符串

示例：多个节点

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>
    <script>
      const app = document.querySelector('#app');
      const foo = document.createElement('div');
      foo.textContent = 'hello, jsweibo';
      const bar = document.createElement('div');
      bar.textContent = 'hello, world';
      app.append(foo, bar);
    </script>
  </body>
</html>

示例：多个字符串

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>
    <script>
      const app = document.querySelector('#app');
      app.append('hello, jsweibo', 'hello, world');
    </script>
  </body>
</html>