JavaScript之append、appendChild、innerText、innerHTML与textConten的区别、getTime、createElement、createTextNode

前言

在JavaScript中，append、appendChild、innerText、innerHTML与textContent是处理DOM(文档对象模型)的常见属性和方法。

---

1、如果要添加子节点，推荐使用append方法，它更简洁且支持添加多个节点。
2、如果只需要添加一个子节点，则可以使用appendChild方法。
3、如果要设置元素的文本内容，且不涉及HTML标记，可以使用textContent属性，它的性能更好。
4、如果需要操作包含HTML标记的内容，可以使用innerHTML属性，但要注意潜在的安全风险。
5、innerText属性可以用来获取已渲染的文本内容，但在设置文本时不够灵活，不推荐在修改内容时使用。

append

1、append方法用于将一个或多个节点或文本作为最后一个子节点添加到指定父节点的子节点列表中。
2、该方法直接操作DOM，不返回新创建的节点。
3、可以通过传递一个或多个参数来添加多个节点。
4、它是较新的方法，可能不被所有浏览器完全支持。

const parent = document.getElementById('parent');
const child = document.createElement('div');

child.textContent = 'Child element';
parent.append(child);

---

appendChild

1、appendChild方法用于将一个节点添加到另一个节点的子节点列表的末尾。
2、类似于append方法，但只能接受一个参数。
3、是较旧的方法，在所有主流浏览器中都受到支持。

const parent = document.getElementById('parent');
const child = document.createElement('div');

child.textContent = 'Child element';
parent.appendChild(child);

---

innerText

1、innerText属性设置或返回指定元素的文本内容，其中包含所有HTML标记。
2、会返回已渲染的文本，会触发浏览器的重绘和回流。
3、不会返回隐藏的文本，如通过CSS的display: none;或visibility: hidden;隐藏的元素文本。

const element = document.getElementById('example');

console.log(element.innerText);

element.innerText = '关注“代码农”微信公众号';

---

innerHTML

1、innerHTML属性设置或返回指定元素的HTML内容，包括所有HTML标记。
2、会将字符串解析为HTML，并在指定元素内部生成对应的DOM树。
3、可以用来动态添加或更新HTML内容，但潜在的安全风险较高。

const element = document.getElementById('example');

element.innerHTML = '<strong>New content</strong>';

---

textContent

1、textContent属性设置或返回指定元素的文本内容，不包含任何HTML标记。
2、返回元素的所有文本内容，包括隐藏的文本。
3、不会触发浏览器的重绘和回流，性能上更优。

const element = document.getElementById('example');

console.log(element.textContent);

---

其他

append

MDN

Element.append方法在Element的最后一个子节点之后插入一组Node对象或DOMString对象。被插入的DOMString对象等价为Text节点。与Node.appendChild()的差异：
Element.append()允许追加DOMString对象，而 Node.appendChild() 只接受Node对象。
Element.append()没有返回值，而Node.appendChild()返回追加的Node对象。
Element.append()可以追加多个节点和字符串，而Node.appendChild()只能追加一个节点。

---

appendChild

w3school

appendChild()方法将节点(元素)作为最后一个子元素添加到元素。

---

MDN

Node.appendChild()方法将一个节点附加到指定父节点的子节点列表的末尾处。如果将被插入的节点已经存在于当前文档的文档树中，那么appendChild()只会将它从原先的位置移动到新的位置(不需要事先移除要移动的节点)。
这意味着，一个节点不可能同时出现在文档的不同位置。所以，如果某个节点已经拥有父节点，在被传递给此方法后，它首先会被移除，再被插入到新的位置。若要保留已在文档中的节点，可以先使用Node.cloneNode()方法来为它创建一个副本，再将副本附加到目标父节点下。请注意，用cloneNode制作的副本不会自动保持同步。
如果给定的子节点是DocumentFragment，那么DocumentFragment的全部内容将转移到指定父节点的子节点列表中。
有更加新的API可供使用！ > ParentNode.append() (en-US) 方法支持多个参数，接受字符串作为参数，会将字符串转换为文本节点再附加。

---

innerHTML

w3school

innerHTML属性设置或返回元素的HTML内容(内部HTML)。

---

MDN

Element.innerHTML属性设置或获取 HTML 语法表示的元素的后代。
如果一个<div>、<span>或<noembed>节点有一个文本子节点，该节点包含字符&、<或>，innerHTML将这些字符分别返回为&、<和>。使用Node.textContent可获取一个这些文本节点内容的正确副本。
如果要向一个元素中插入一段HTML，而不是替换它的内容，那么请使用insertAdjacentHTML()方法。

---

区别

append可以同时传入多个节点或字符串，没有返回值。
appendChild只能传一个节点，且不直接支持传字符串，需要appendChild(document.createTextElement('字符串'))代替，返回追加的Node节点；若appendChild()的参数是页面存在的一个元素，则执行后原来的元素会被移除。
innerHTML添加的是纯字符串，不能获取内部元素的属性；不同于appendChild添加到的是dom对象，返回的也是dom对象，可以通过dom对象访问获取元素的各种属性。

---

性能

innerHTML比appendChild要方便，特别是创建的节点属性多，同时还包含文本的时候。
但执行速度的比较上，使用appendChild比innerHTML要快，特别是内容包括html标记时，appendChild明显要快于innerHTML，这可能是因为innerHTML在铺到页面之前还要对内容进行解析才能铺到页面上，当包含html标记过多时，innerHTML速度会明显变慢。

---

案列

html

<div id="test1"></div>
<br>
<input type="button" οnclick="innerTest()" value="testInnerHTML">
<div id="test2"></div>
<br>
<input type="button" οnclick="appendTest()" value="testAppendChild">

---

JavaScript

function innerTest() {
	let t1 = (new Date()).getTime(),
		t2 = undefined,
		a = "<b>apple</b>",
		b = document.getElementById("test1");
		
	for (var i = 0; i < 500; i++) b.innerHTML += a;
	
	t2 = (new Date()).getTime();
	
	console.log("testInnerHTML: " + (t2 - t1));
}

function appendTest() {
	let t1 = (new Date()).getTime(),
		t2 = undefined,
		b = document.getElementById("test2");
		
	for (var i = 0; i < 500; i++) {
		let a = document.createElement("b");
		
		a.appendChild(document.createTextNode("apple"));
		b.appendChild(a);
	}
	
	t2 = (new Date()).getTime();
	
	console.log("testAppendChild: " + (t2 - t1));
}

---

createTextNode

MDN

创建一个新的文本节点。这个方法可以用来转义HTML字符。

---

w3school

createTextNode()方法创建文本节点。

---

createElement

MDN

在HTML文档中，Document.createElement方法用于创建一个由标签名称tagName指定的HTML元素。如果用户代理无法识别tagName，则会生成一个未知HTML元素HTMLUnknownElement。

---

w3school

createElement方法创建元素节点。

---

getTime

w3school

getTime()方法返回从1970年1月1日午夜到指定日期之间的毫秒数。

---

MDN

getTime()方法返回一个时间的格林威治时间数值。
你可以使用这个方法把一个日期时间赋值给另一个Date对象。这个方法的功能和valueOf()方法一样。