js创建子元素：innerHTML与document.createElement()_document添加子元素-优快云博客

本文链接：https://blog.youkuaiyun.com/wsj2311161832/article/details/122672502

本文探讨了在不同场景下使用innerHTML和document.createElement()方法创建DOM元素的优劣，并提供了实际代码示例。对于少量元素的创建，innerHTML更为快捷；而对于已布局的元素及样式块元素，则推荐使用document.createElement()。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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('')是去除,分割符