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

最新推荐文章于 2023-10-23 07:32:15 发布

&XYZ&

最新推荐文章于 2023-10-23 07:32:15 发布

阅读量3.6k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/JEFF_luyiduan/article/details/101163308

版权

JavaScript 专栏收录该内容

73 篇文章 1 订阅

订阅专栏

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

    //创建元素节点
    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>

result:

&XYZ&

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
创建元素：createElement、文本：createTextNode、注释节点：createComment；appendChild（）、insertBefore（）、创建属性节点

创建元素、文本、注释节点 //创建元素节点 const span = document.createElement('span'); console.log(span); //创建文本节点 const text = document.createTextNode('XYZ'); console.log(text); //创建注释节点 ...
复制链接

扫一扫