1. 全栈程序员必看首页

js添加元素方法

全栈程序员-用户IM • • 未分类

js添加元素方法1.insertBefore添加元素到指定位置<ulid=”ul”><li>1</li><li>2</li><li>3</li></ul><ulid=”sel”></ul><script>varbtn=docume…

大家好，又见面了，我是你们的朋友全栈君。

1.insertBefore添加元素到指定位置

<ul id="ul">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<ul id="sel">

</ul>
<script>
var btn = document.getElementById('btn');
btn.onclick = function () { 
   
    var li = document.createElement('li');
    li.innerText = 'abcd';
    //把li插入到ul的第一个位置
    var ul = document.getElementById('ul');
    //insertBefore
    //ul.insertBefore(li, ul.children[0]); //insertBefore(要添加的元素,已添加的元素)
    ul.insertBefore(li, ul.children[0].nextElementSibling);//添加到指定元素后面
</script>

2.appendChild 添加子节点到父节点的末尾

 var btn = document.getElementById('btn');
    btn.onclick = function () { 
   
        var li = document.createElement('li');
        li.innerText = 'abcd';
        //把li插入到ul的第一个位置
        var ul = document.getElementById('ul');
 var div = document.createElement('div');
 div.innerText = 'div';
 ul.append(div);

 //appendChild
 var sel = document.getElementById('sel');
 //如果为true,则该节点的所有后代节点也都会被克隆,如果为false,则只克隆该节点本身.
 //本来div节点会被添加到#ul上,但是sel.添加了div,所以#ul没有div节点
 sel.appendChild(div);  //将原来div的位置 添加到 #sel中,原先的会消失
 //var cloneNode = div.cloneNode(true); //cloneNode 生成的克隆节点, div被克隆的节点,
 //cloneNode.innerText = 'test';
 //sel.appendChild(cloneNode); //克隆解决原节点转移位置

3.replaceChild 替换子节点

var div = document.createElement('div');
div.innerText = 'div';
ul.replaceChild(div,ul.children[0]); //(替换元素,被替换的元素)
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/152064.html原文链接：https://javaforall.cn

【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛

【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

赞 (0)
全栈程序员-用户IM全栈程序员-用户IM
0 0


相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号