Javascript innerHTML

Question

目前，我正在学习Javascript和innerHTML，并在理解innerHTML方面发现了一些问题。

这是我的代码：http://jsfiddle.net/hphchan/bfjx1w70/1/

我已经学习了标准DOM方法和innerHTML方法，它工作得很好，但我不知道为什么编写以下代码是错误的：

// this method fails
var element2 = document.createElement('p'); 
element2.innerHTML = "hello <em>Herbert</em>";

// standard methods of innerHTML method I learnt from textbook, BUT it requires to type tags in HTML
var element3 = document.getElementById('el');
element3.innerHTML = "innerHTML: hello <em>Herbert</em>";

我想问为什么第一种方法行不通。这样做有什么问题呢？此外，如果我不想在HTML中键入任何内容(包括标记)，并且希望使用innerText实现与JSFiddle显示的“Herbert”相同的输出，该怎么办？

Answer 1

主要错误是innerText的使用。在大多数情况下，我都会避开这种情况，因为innerHTML适用于这两种情况。(文字和标记)

虽然我认为innerText有它的魅力，如果您想要显示它本身的HTML代码，而不是呈现它。

因此，因为字符串中有一个HTML标记，所以它不是一个普通的文本节点。如果你只使用“你好赫伯特”而不是“你好赫伯特”，它就会奏效。

​

var element2 = document.getElementById('el'); 

element2.innerText = "hello Herbert";

<p id='el'></p>

​

另一个问题是，尽管您有这个元素，但在您将其实际放入DOM之前，它是无用的，这就是示例2不能工作的原因。

试一试

document.body.appendChild(element2);

所以,

​

var element2 = document.createElement('p'); 

element2.innerHTML = "hello <em>Herbert</em>";

document.body.appendChild(element2);

​

希望能帮上忙！有关更多信息，请访问appendchild.asp。

Answer 2

因为"hello <em>Herbert</em>"包含html标记(em)，所以innerText不能工作，但是innerHTML可以工作。

Answer 3

文本"hello <em>Herbert</em>"并不完全是文本，因为它中包含HTML。在这种情况下，您确实需要使用innerHTML：

element2.innerHTML = "hello <em>Herbert</em>";