JavaScript中的Node.prototype.appendChild

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2020/06/13/JavaScript%E4%B8%AD%E7%9A%84Node-prototype-appendChild/

摘要

本文主要讲述了：

作用
参数
返回值

正文

作用

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

示例：

<!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>hello, jsweibo</div>
    </div>
    <script>
      const app = document.querySelector('#app');
      const foo = document.createElement('div');
      foo.id = 'foo';
      foo.textContent = 'hello, world';
      console.log(app.appendChild(foo));
    </script>
  </body>
</html>

注意：若被插入的节点已经位于文档中，再将其插入到一个新的地方，此时Node.prototype.appendChild()的作用类似剪切粘贴。

示例：将id=foo剪切粘贴到id=app中

<!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>
    <div id="foo">hello, jsweibo</div>
    <script>
      const app = document.querySelector('#app');
      const foo = document.querySelector('#foo');
      console.log(app.appendChild(foo));
    </script>
  </body>
</html>

参数

只能接受一个参数，参数类型为节点

注意：DocumentFragment是Node的派生类，因此DocumentFragment也可以作为参数

示例：

<!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.createDocumentFragment();
      console.log(app.appendChild(foo));
    </script>
  </body>
</html>