春风得意马蹄疾
一日看尽长安花

javaScript DOM创建与添加元素

创建标签

var div =document.createElement("div");

为父元素追加子元素appendChild()

格式:父元素.appendChild();

var span = document.createElement("span");

div.appendChild(span);

将创建好的标签添加到body内

document.body.appendChild(div);

为标签添加文本内容

div.textContent="你好";

为父元素插入子元素到指定位置

格式:父容器.insertBefore(要插入的元素,插入在谁的前面);

<div id="div0">
        <a href="#">你好</a>
</div>
// 将span插入在超链接a前面
var div=document.querySelector("#div0");
var span=document.createElement("span");
div.insertBefore(span,div.firstElementChild); 
 // 插入在div0的前面
div.parentElement.insertBefore(span,div);
//插入在div0的后面
div.parentElement.insertBefore(span,div.nextElementSibling);
// 给超链接前面插入文本  好
var div=document.querySelector("#div0");
// 创建文本节点格式:   document.createTextNode("文本");
// 相当于创建了一个文件节点对象,直接可以将这个文本节点对象插入在任何需要的位置
var text=document.createTextNode("好");
div.insertBefore(text,div.firstElementChild);

当我们创建添加元素的时候,需要使用父元素.appendChild(),但是如果想在body中创建若干个元素时,可使用循环的方法在每次循环中为body添加,如下方法一,但是这种方法的效率是非常低的。

for(var i=0;i<50;i++){
            var div=document.createElement("div");
            document.body.appendChild(div);
}

这时候我们可以创建一个碎片容器,将要添加的元素先存入容器内,最后再将碎片容器添加给body。

var frag=document.createDocumentFragment();
for(var i=0;i<50;i++){
            var div=document.createElement("div");
            frag.appendChild(div);
}
document.body.appendChild(frag); 
Like
Like Love Haha Wow Sad Angry
711
赞(1) 打赏
未经允许不得转载:栗子纪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