JavaScript DOM三种创建元素的方式

三种创建元素的方式:

  1. document.write()
  2. element.innerHTML
  3. document.createElement()

初始HTML内容:

<button>btn</button>
<p>p</p>
<div class="inner">inner</div>
<div class="create">create</div>

预览:

1. document.write()

实现代码:

var btn = document.querySelector('button');
btn.onclick = function() {
    document.write('<div>123</div>');
}

实现效果:
点击“btn”按钮之后:

使用document.write()创建元素,如果页面文档流加载完毕,再调用事件会导致页面重绘

2. element.innerHTML

字符串拼接方式:
实现代码:

var inner = document.querySelector('.inner');
for (var i = 0; i < 10; i++) {
    inner.innerHTML += '<a href="#">123</a>';
}
inner.innerHTML = arr.join('');

实现效果:

添加数组元素方式:
实现代码:

var inner = document.querySelector('.inner');
var arr = [];
for (var i = 0; i < 10; i++) {
    arr.push('<a href="#">123</a>');
}
inner.innerHTML = arr.join('');

实现效果:

3. document.createElement()

实现代码:

var create = document.querySelector('.create');
for (var i = 0; i < 10; i++) {
    var a = document.createElement('a');
    create.appendChild(a);
}

实现效果:

总结:

  1. document.write 是直接将内容写入页面的内容流,但是文档流执行完毕,则它会导致页面全部重绘
  2. innerHTML 是将内容写入某个DOM节点,不会导致页面全部重绘。创建多个元素,结构稍微复杂。
  3. createElement() 创建多个元素,结构更清晰。
posted @ 2020-10-09 18:51  火星飞鸟  阅读(380)  评论(0编辑  收藏