欢迎光临
我的个人博客网站

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> 

预览:
JavaScript DOM三种创建元素的方式

1. document.write()

实现代码:

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

实现效果:
点击“btn”按钮之后:
JavaScript DOM三种创建元素的方式
使用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(''); 

实现效果:
JavaScript DOM三种创建元素的方式
添加数组元素方式:
实现代码:

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

实现效果:
JavaScript DOM三种创建元素的方式

3. document.createElement()

实现代码:

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

实现效果:
JavaScript DOM三种创建元素的方式

总结:

  1. document.write 是直接将内容写入页面的内容流,但是文档流执行完毕,则它会导致页面全部重绘
  2. innerHTML 是将内容写入某个DOM节点,不会导致页面全部重绘。创建多个元素,结构稍微复杂。
  3. createElement() 创建多个元素,结构更清晰。
赞(0) 打赏
未经允许不得转载:张拓的天空 » JavaScript DOM三种创建元素的方式
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏