js添加元素方法_js添加元素的三种方法

js添加元素方法_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 添加子节点到父节点的末尾

此代码由Java架构师必看网-架构君整理
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]); //(替换元素,被替换的元素)
本文来源香格里拉&,由架构君转载发布,观点不代表Java架构师必看的立场,转载请标明来源出处:https://javajgs.com/archives/212081
0

发表评论