创建元素：createElement、文本：createTextNode、注释节点：createComment；appendChild（）、insertBefore（）、创建属性节点-蒲公英云

创建元素：createElement、文本：createTextNode、注释节点：createComment；appendChild（）、insertBefore（）、创建属性节点

创建元素、文本、注释节点

//创建元素节点
    const span = document.createElement('span');
    console.log(span);
    //创建文本节点
    const text = document.createTextNode('XYZ');
    console.log(text);
    //创建注释节点
    const comment = document.createComment('这是创建的注释节点');
    console.log(comment);

appendChild：插入的子节点是DOM文档树里面已经存在的节点的话，这个节点会被移动到用appendChild()插入的位置，而不会被复制，反之直接插入。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
</div>
</body>
<script>
    const div = document.getElementsByTagName('div')[0];
    //创建一个文本节点，内容为：XYZ
    const text = document.createTextNode('XYZ');
    //插入到div里面
    div.appendChild(text)
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div></div>
<span></span>
</body>
<script>
    /*
    注意：
        没有执行appendChild的时候body结构为：
                                            <body>
                                                <div></div>
                                                <span></span>
                                            </body>
     */
    const div = document.getElementsByTagName('div')[0];
    const span = document.getElementsByTagName('span')[0];
    div.appendChild(span)
    /*
     注意：
        执行appendChild过后的body结构为：
                                            <body>
                                                <div>
                                                    <span></span>
                                                </div>
                                            </body>
     */
</script>
</html>

insertBefore() 方法在您指定的已有子节点之前插入新的子节点。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>xyz</title>
</head>
<body>
  <div id="content" name="xyz">
    <span></span>
    <q></q>
    <em></em>
    <i></i>
    <strong></strong>
  </div>
</body>
<script>
  const content = document.getElementById("content");
  const strong = document.getElementsByTagName("strong")[0];
  const span = document.createElement("span");
  content.insertBefore(span, strong);
  content.insertBefore(span, strong);
</script>
</html>

创建属性节点document.createAttribute()：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>温故而知新</title>
  <style></style>
</head>
<body>
  <div class="test">
    <span></span>
    <br />
    <strong></strong>
    <a href=""></a>
    <i></i>
  </div>
</body>
<script>
  const newTest = document.getElementsByClassName("test")[0];
  const cla = document.createAttribute("id");//创建属性节点
  cla.nodeValue = "xyz";//设置属性节点的值
  newTest.setAttributeNode(cla)//将创建的属性节点放到想放的节点处
</script>
</html>