HTML5中DOM扩展-插入标记的两个属性

前言

  当我们想要插入大量HTML，相比于"像创建一堆节点，再将它们以正确顺序连接起来"，直接插入会更方便一点。HTML5为我们提供了更方便的标准化属性。

1.innerHTML属性

1.1 作用

  ①获取元素所有后代中的元素、注释、文本节点。
  ②重置(替代)元素后代中的所有节点。

1.2.1 示例一

<div id="Checkbox1">
	你好，世界！
</div>
		
<script>
	const div_1 = document.querySelector("div");
	let txt = div_1.innerHTML;//读取当前div元素的后代
	console.log(txt);
</script>

1.2.2 示例一的结果图

1.3.1 示例二

<div id="Checkbox1">
	你好，世界！
</div>

<script>
	const div_1 = document.querySelector("div");
	div_1.innerHTML = "hello world!";//重置当前div元素的所有后代
</script>

1.3.2 示例二的结果图

 

2.outerHTML属性

2.1 作用

  ①读取当前元素及其所有后代。
  ②重置(替代)当前元素及其所有后代。

2.2.1 示例一

<div id="Checkbox1">	
	你好，世界！
</div>
<script>
	const div_1 = document.querySelector("div");
	let txt = div_1.outerHTML;//读取当前元素及其后代
	console.log(txt);
</script>

2.2.2 示例一的结果图

2.3.1 示例二

<div id="Checkbox1">
	你好，世界！
	<p>瓦蓝蓝的天空</p>
</div>
<script>
	const div_1 = document.querySelector("div");
	div_1.outerHTML = "<p>广阔的世界</p>";//重置当前div元素及其所有后代
</script>

2.3.2 示例二的结果图

(新的p标签会替代原来DOM树中的 div节点、p节点以及文本节点)

 
  注意:在操作时，innerHTML和outerHTML的区别是：前仅包含其后代元素。后者包含本身和后代元素。