建议（创建少量元素时）：
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('')是去除,分割符
版权声明：本文为wsj2311161832原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。