JS基础语法查找和创建节点

最新推荐文章于 2022-04-24 20:07:41 发布

劫；道

最新推荐文章于 2022-04-24 20:07:41 发布

阅读量150

点赞数 1

文章标签：插入查找节点

本文链接：https://blog.csdn.net/qq_44091363/article/details/89380611

版权

创建一个p标签节点
      1.创建节点:createElement()
      2.插入节点 appendChild()
        var p=document.createElement("p");
        第一种
         p.innerHTML="今天天气有点可以~~~";
         p.innerText="今天有点热~~";

        第二种
        var text= document.createTextNode("今天是星期三");
        p.appendChild(text);
        console.log(p);
        div.appendChild(p);

        第三种
        div.innerHTML="<p>王思聪有点帅!</p>";   //识别html标签结构
        div.innerText="<p>王思聪有点帅!</p>";     //识别文本

        //把div追加到img之前 指定位置
        console.log(document.body.insertBefore(div,document.getElementById("img")));
        document.body.insertBefore(div,undefined);
        document.body.insertBefore(div); 第二个参数必须得给

简接查找节点
<body>
    <div id="box">
        <div></div>
        <div class="er">
            <p>p1</p>
            <p>p2</p>
            <p>p3</p>
        </div>
        <div></div>
    </div>
    <script>
        var div2=document.getElementsByClassName("er")[0];
        //childNodes	返回元素的一个子节点的数组  包括文本节点
        console.log(div2.childNodes); //所有子节点
        console.log(div2.children);  //元素节点

        //firstChild	返回元素的第一个子节点
        console.log(div2.firstChild);  //文本节点
        //lastChild	返回元素的最后一个子节点
        console.log(div2.lastChild);   //文本节点
        //地一个和最后一个元素子节点
        console.log(div2.firstElementChild);   //p1
        console.log(div2.lastElementChild);   //p3

        //nextSibling	返回元素的下一个兄弟节点
        console.log(div2.nextSibling);
        //previousSibling	返回元素的上一个兄弟节点
        console.log(div2.previousSibling);
        //上一个|下一个元素兄弟节点
        console.log(div2.nextElementSibling);
        console.log(div2.previousElementSibling);

        //parentNode	返回元素的父节点
        console.log(div2.parentNode);

    </script>

劫；道

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS基础语法查找和创建节点

创建一个p标签节点 1.创建节点:createElement() 2.插入节点 appendChild() var p=document.createElement("p"); 第一种 p.innerHTML="今天天气有点可以~~~"; p.innerText="今天有点热~~"; 第...
复制链接

扫一扫