三种动态创建元素的区别

简介: 三种动态创建元素的区别document.createElement()document.write()innerHTML

三种动态创建元素的区别

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

首先 write

document.write('写入的内容');
复制代码

调用这个方法之后,整个页面的内容将会被替换为写入的内容,所以这个方法只能在页面加载完成之前调用,否则会导致页面内容丢失。

也就是说,如果此方法在页面加载完成之后调用,会导致整个页面只剩下write方法里面的内容。

其次 createElement

var div = document.createElement('div');
div.innerHTML = '写入的内容';
document.body.appendChild(div);
复制代码

这个方法是动态创建一个元素,然后将这个元素添加到页面中。

相当于在页面中床架一个文本节点,然后通过appendChild方法将这个文本节点添加到页面中。这个方法不会导致页面的重绘,也就不会出现write的问题。

最后 innerHTML

element.innerHTML = '写入的内容';
复制代码

这个方法是直接将所选元素的内容替换为写入的内容,所以这个方法也不会导致页面的重绘。但是如果所选节点为body,那么也会导致页面的重绘。



目录
打赏
0
0
0
0
0
分享
相关文章
|
7月前
|
js 数组移除指定元素【函数封装】(含对象数组移除指定元素)
js 数组移除指定元素【函数封装】(含对象数组移除指定元素)
53 0
数组:数组是JS中的一种特殊对象,用于存储一组有序的数据。需要掌握数组的创建、访问、修改以及各种内置方法。
数组:数组是JS中的一种特殊对象,用于存储一组有序的数据。需要掌握数组的创建、访问、修改以及各种内置方法。
90 2
数组和对象有什么区别?
数组和对象有什么区别?
106 0
什么是数组,什么是对象,他们的区别是什么
什么是数组,什么是对象,他们的区别是什么
91 0
找出数组中单独的元素
此类题目需要非常熟悉位操作及位运算,同时要画图思考,才能将思路整理得很清楚。 或许有很多读者对我提出疑问,他们会认为这只是针对我举例的数组,才会有这种结果。而我想说:你们可以有时间尝试换一换数组中的元素,并且打乱顺序,也是可以做到的。本篇博客的目的主要是阐明逻辑,因为思路很重要!
143 0
找出数组中单独的元素
lodash遍历并继承对象属性,自定义分配
lodash遍历并继承对象属性,自定义分配
154 0
lodash遍历并继承对象属性
lodash遍历并继承对象属性
97 0
lodash根据对象自身和继承的属性创建键值对数组
lodash根据对象自身和继承的属性创建键值对数组
58 0
设计一个名为Queue的类用于存储整数。在栈中,元素以“后进先出”的方式获取。在队列中,元素以“先进先出”方法获取。
设计一个名为Queue的类用于存储整数。在栈中,元素以“后进先出”的方式获取。在队列中,元素以“先进先出”方法获取。
124 0