Summer cloud

javaScript DOM复制、删除与替换元素

元素的复制

格式:元素.cloneNode(深度布尔值)

深度布尔值false:浅复制 ,仅复制元素,不复制内容和子元素

深度布尔值true:深复制,可以将元素和元素里面的内容及子元素都复制过去

<div id="div0">
    <div id="divs">
        <span>2</span>
    </div>
</div>
//浅复制
var divs=document.getElementById("divs");
var div =divs.cloneNode(false);
//结果:<div id="divs"></div>
//深复制
var div0=divs.cloneNode(true);
console.log(div0);
//结果:<div id="divs">
           <span>2</span>
        </div>

注:不管是浅复制还是深复制,都会将标签的属性全部复制,因此类似上例中的ID会产生问题,复制后的标签都需要重新设置ID

元素的删除

格式:1、元素.remove();元素自身删除

2、父容器.removeChild(子元素);父元素删除子元素

var  div=document.createElement("div");
div.textContent="1";
document.body.appendChild(div);
div.remove();//元素.remove()
console.log(document.body);
//第二种方法
//document.body.removeChild(div);

元素的替换

格式:父容器.replaceChild(新的元素,要替换的元素);

var div=document.createElement('div');
div.textContent="1";
document.body.appendChild(div);
var p=document.createElement("p");
p.textContent="2";
document.body.appendChild(p);
document.body.replaceChild(div,p);

运行结果:

Like
Like Love Haha Wow Sad Angry
赞(1) 打赏
未经允许不得转载:Summer Cloud Blog » javaScript DOM复制、删除与替换元素
分享到: 更多 (0)
0 0 vote
Article Rating
Subscribe
提醒
guest
0 评论
Inline Feedbacks
View all comments

创作不易,打赏一下作者买瓶洗发露

支付宝扫一扫打赏

微信扫一扫打赏

0
Would love your thoughts, please comment.x
()
x