DOM动态创建元素的方法

最新推荐文章于 2022-10-06 15:11:43 发布

weixin_43024140

最新推荐文章于 2022-10-06 15:11:43 发布

阅读量436

点赞数

本文链接：https://blog.csdn.net/weixin_43024140/article/details/97164810

版权

DOM创建元素的三种方式

1. HTML DOM write() 方法

document.write('新设置的内容<p>标签也可以生成</p>');

2. innerHTML 属性

var divs = document.getElementById('div');
divs.innerHTML = '新内容 <del>标签也可以生成</del>';

如果使用Element.getElementsByTagName() 方法获取元素引用，则需指定下标，因为它返回的是一个集合。
返回一个集合的方法还有getElementsByTagName() 、getElementsByClassName() 等。
MDN对Element.getElementsByTagName() 方法的部分描述如下所示。

返回一个动态的包含所有指定标签名的元素的HTML集合

var tests = document.getElementsByTagName('p')[0];
tests.innerHTML = '新内容 <del>标签也可以生成</del>';

代码：

<body>
	<p id="test">旧内容</p>

	<script>
		// getElementById获取引用
		// var tests = document.getElementById('test');
		// tests.innerHTML = '新内容 <del>标签也可以生成</del>';
		
		// getElementsByTagName获取引用
		var tests = document.getElementsByTagName('p')[0];
		tests.innerHTML = '新内容 <del>标签也可以生成</del>';
	</script>
</body>

3. XML DOM createElement() 方法

// 创建元素节点
var tests = document.createElement('p');
// 创建文本节点
tests.innerText = '新内容 <del>标签不可以生成</del>';
// 把新元素节点挂到body下
document.body.appendChild(tests);

上述三种方法所耗时间

1.HTML DOM write() 方法

<script>
	function fn() {
		var d1 = +new Date();

		for ( var i = 0; i < 1000; i++) {
			document.write('<div style="width:100px; height:2px; border:1px solid blue;"></div>');
		}

		var d2 = +new Date();
		alert(d2 - d1 + '毫秒');
	}
	fn();
</script>

所耗时间：
在这里插入图片描述

2. innerHTML 属性
未优化代码：

<script>
	function fn() {
		var d1 = +new Date();

		for ( var i = 0; i < 1000; i++) {
			document.body.innerHTML += '<div style="width:100px; height:2px; border:1px solid blue;"></div>';
		}

		var d2 = +new Date();
		alert(d2 - d1 + '毫秒');
	}
	fn();
</script>

所耗时间：
在这里插入图片描述

优化后代码：
（新元素存放至数组中，然后一次性渲染到页面上）

<script>
	function fn() {
		var d1 = +new Date();

		var array = [];
		for ( var i = 0; i < 10000; i++) {
			array.push('<div style="width:100px; height:2px; border:1px solid blue;"></div>');
		}
		document.body.innerHTML = array.join('');
		
		var d2 = +new Date();
		alert(d2 - d1 + '毫秒');
	}
	fn();
</script>

所耗时间：
在这里插入图片描述

3. XML DOM createElement() 方法
代码：

<script>
	function fn() {
		var d1 = +new Date();

		for ( var i = 0; i < 1000; i++) {
			var div = document.createElement('div');
			div.style.width = '100px';
			div.style.height = '2px';
			div.style.border = '1px solid blue';
			document.body.appendChild(div);
		}
		
		var d2 = +new Date();
		alert(d2 - d1 + '毫秒');
	}
	fn();
</script>

所耗时间：
在这里插入图片描述