js创建子元素：innerHTML与document.createElement()

沐羽想变强

已于 2022-11-13 11:14:43 修改

阅读量3.8k

点赞数

分类专栏：笔记文章标签： javascript css html

于 2022-01-24 20:59:34 首次发布

本文链接：https://blog.csdn.net/wsj2311161832/article/details/122672502

版权

笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

建议（创建少量元素时）：

1.当父元素里没有其他元素，或者只添加少量行内元素或行内块元素时用innerHTML。

原因：此时不会破坏父元素内的整体布局，并且只添加如a标签、span标签这些行内元素时，用innerHTML更加快捷。

2.当父元素里已经布局了其他元素，并且添加有样式块元素时用document.createElement()。

原因：用document.createElement()创建元素插入顺序，可以通过element.appendChild（往后插）和element.insertBefore（往前插）来控制。并且如果创建的元素有样式，可直接给其element.className或者element.style.来添加样式。

    <style> 
        .father {
            width: 800px;
            margin: auto;
            border: 1px solid;
        }
        .father .child1 {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        .father .child2 {
            width: 200px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="father"></div>
</body>

innerHTML创建子元素：

<script>
    let father = document.querySelector('.father');
    father.innerHTML += '<div class="child1">1</div>';
    father.innerHTML += '<div class="child2">2</div>';
    father.innerHTML += '<a href="#">我是a标签</a>'
    father.innerHTML += '<span>我是span标签</span>'
</script>

document.createElement()创建子元素

<script>
    let father = document.querySelector('.father');
    //添加div1
    let child1 = document.createElement('div');
    child1.innerHTML='1';
    child1.className='child1';
    father.appendChild(child1);
    //添加div2
    let child2 = document.createElement('div');
    child2.innerHTML='2';
    child2.className='child2';
    father.appendChild(child2);
    //添加a标签
    let a1 = document.createElement('a');
    a1.innerHTML='我是a标签';
    a1.href='#';
    father.appendChild(a1);
    //添加span标签
    let span1 = document.createElement('span');
    span1.innerHTML='我是span标签';
    father.appendChild(span1);
</script>

注意：当创建大量元素时，切记不要使用innerHTML拼接字符串，因为这样效率低下，加载慢。

可以用document.createElement()循环创建，这样效率较高，逻辑性强。

其实还有更加有效率的方法，那就是将要创建的大量元素循环添加到数组里（用arr.push()）,然后将数组用innerHTML添加到父元素中。

    let arr = [];
    for (let i = 0; i <10; i++) {
       arr.push('<a href="#">我是a标签</a>')
    }
    father.innerHTML+=arr.join('');//arr.join('')是去除,分割符

沐羽想变强

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
js创建子元素：innerHTML与document.createElement()

建议（创建少量元素时）：1.当父元素里没有其他元素，或者只添加少量行内元素或行内块元素时用innerHTML。原因：此时不会破坏父元素内的整体布局，并且只添加如a标签、span标签这些行内元素时，用innerHTML更加快捷。2.当父元素里已经布局了其他元素，并且添加有样式块元素时用document.createElement()。原因：用document.createElement()创建元素插入顺序，可以通过elemen...
复制链接

扫一扫