JS增删改查

315 阅读1分钟

<div class="box">
<p id ="word">文本内容</p>
<button id ="btn">点我</button>
</div>

增添节点

window.onload = function(ev){
    var box = document.getElementsByClassName('box')[0];

    //创建节点
    var img = document.createElement('img');
    img.src = '';
    //box.appendChild(img);  把创建好的标签追加到box里
 
    var btn = document.getElementsByTagName('button')[0];
    box .insertBefore(img,btn);     //把img标签放在btn前面
}


删除节点

方法1
  var box = document.getElementsByTagName('box')[0];
  btn.remove();
方法2
  box.removeChild(btn);


克隆标签

var box = document.getElementsByClassName('box')[0];
//var newBox = box.cloneNode();//浅克隆(只克隆当前元素本身,子元素不会被克隆)

var newBox = box.cloneNode(true);//深克隆
document.body.appendChild(newBox);