DOM对象——创建节点和插入节点

最新推荐文章于 2024-08-15 23:54:05 发布

炬火埋土

最新推荐文章于 2024-08-15 23:54:05 发布

阅读量6.8k

点赞数 4

分类专栏： Javascript 文章标签： javascript 前端 json

本文链接：https://blog.csdn.net/qq_51526974/article/details/123245243

版权

Javascript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

创建节点和插入节点

很多时候我们想要在某个位置插入一个新的节点，此时我们首先需要有一个新的节点

创建节点

方法	描述
createElement()	创建一个新的节点，需要传入节点的标签名称，返回创建的元素对象
createTextNode()	创建一个文本节点，可以传入文本内容
innerHTML()	也能达到创建节点的效果，直接添加到指定位置

插入节点

方法	描述
write()	将任意的字符串插入到文档中
appendChild()	向元素中添加新的子节点，作为最后一个子节点
insertBefore()	向指定的已有的节点之前插入新的节点newltem;要插入的节点exsitingitem,参考节点需要参考父节点

添加段落

 <body>
        <button onclick="addPara();">添加段落</button>

        <div id="container">
            
        </div>
    </body >

第一种方法

 function addPara(){
            //创建P标签
            var p = document.createElement("p");
            console.log(p);
            //创建文本节点
            var text = document.createTextNode("这真的是一段文本");

            //将文本节点追加到元素节点中
            p.appendChild(text);
            console.log(p);

            //将P标签中内容添加到div中
            var div = document.getElementById("container");
            div.appendChild(p);
        }

第二种方法

 function addPara() {
            let p = document.createElement("p");
            //用innerHTML方法直接给P标签赋值
            p.innerHTML = "这是第二段文本";

            let div = document.getElementById("container");
            div.appendChild(p);
        }

第三种方法

function addPara(){
            let p = "<p>这是第三段文本</p>";
            let div = document.getElementById("container");
            div.innerHTML += p;
        }

第三种方法最简单，首先选择相应ID 的div标签，然后在P标签中添加内容，最后通过innerHTML方法将P标签中内容放到div标签中

图片的创建节点和插入节点的方式类似

添加文本框

 <body>
        <button onclick="addText();">添加文本框</button>

        <div id="container">

        </div>
    </body >

第一种方法

function addText(){
            let div = document.getElementById("container");
            let inp = document.createElement("input");
            inp.type = "text";
            inp.value = "没事就多喝水";
            div.appendChild(inp);
        }

第二种方法

function addText(){
            let div = document.getElementById("container");
            let inp = "<input type='text' value='有事你就别喝水'>";
            div.innerHTML+=inp;
        }

第二种方法将第一种方法的赋值部分整合，使得P标签成为一个字符串而不是一个节点，所以使用innerHTML方法而不是appendChild方法。这一点需要特别注意

添加下拉框

<body>
        <select name="music">
            <option value="1">北京欢迎你</option>
            <option value="2">南京欢迎你</option>
            <option value="3">西安欢迎你</option>

        </select>
        <button onclick="addOptions()">添加下拉框选项</button>
        <hr>
        <div id="container"></div>
    </body >

   function addOptions() {
            /*通过name属性获取下拉框对象*/
            let music = document.getElementsByName("music")[0];

            /*创建下拉选项*/
            let opt = document.createElement("option");

            //设置文本和值
            opt.value = '4';
            opt.text = '七里香';
            //将option添加到下拉选项中
            music.appendChild(opt);
        }

function addOption(){
            let music = document.getElementsByName('music');
            let opt = '<option value="5">从前从前有个人爱你很久</option>'
            music.innerHTML+=opt;
        }