dom04动态创建createElement

04-07
动态创建页面结构,

<script>

box.innerHTML=box.innerHTML+"<ul><li>111</li></ul>";//追加        

box.innerHTML +="<ul><li>111</li></ul>";//追</script>

08,09效率问题:
1拼接字符串,2把字符串变成dom对象,3把dom对象挂在dom树上,4还要渲染。本身消耗性能的,
先去拼接字符串,在循环里只拼接字符串,把其他的放到外边只执行一次会提高效率。

var start= +new Date();
var arr=[];//空数组存放拼接字符串
for (var i = 0; i < 100; i++) {
    //1拼接字符串
        arr.push("<ul><li>111</li></ul>");
    }
    box.innerHTML +=arr.join("");//追加
    //2把字符串变成dom对象,
    //3把dom对象挂在dom树上,
    //4还要渲染。
var end= +new Date();
console.log (end-start);

createElement ,动态创建文本框,创建列表,

for (var i = 0; i < 100; i++) {
    var ul=document.createElement("ul");
    box.appendChild(ul);
    var li=document.createElement("li");
    ul.appendChild(li);
    li,innerHTML="111";
    }   
var end= +new Date();
console.log (end-start);

动态创建文本框

//先判断 如果没有才创建,如果有就不创建,先获取id
var input=document.getElementById("t");
if(input){//判断取消重复创建。
//如果能进来说明是对象 可以找到
    return;
}
 input=document.createElement("input");
 input.id="t";
 input.type="text";
    box.appendChild(input);//创建追加生效重复创建追加了。

创建动态列表:

<script>
    var phones=["小米","苹果","vivo","华为","三星","oppo"];
    var btn=document.getElementById('btn');
    var box=document.getElementById('box');
    btn.onclick = function () {
    //防止重复创建,先添加一个id做判断,如果已存在就不创建,如果不存在就创建
    var ul=document.getElementById('u');
    //如果已存在 是对象,如果不存在是null,对象的布尔值是true;
    if (ul) {
    //如果能进来说明有了,就不再重复创建了。
        return;
    }
    //创建动态列表ul,先获取ul,
    ul=document.createElement("ul");
    ul.id="u";
    ul.className="cls";
    //追加到盒子上,追加子节点
    box.appendChild(ul);
    //对数组进行循环遍历,把phones中的元素得到
    for (var i = 0; i < phones.length; i++) {
        var phone=phones[i];//数组中的每一项元素
        //创建li并追加到ul中
        var li=document.createElement("li");
        li.innerHTML= phone;
        //追加到盒子上,追加子节点
        ul.appendChild(li);

    }
};
</script>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值