Javascript innerHTML

Question

目前正在学习JavascriptDOM和innerHTML，发现在理解innerHTML方面有些问题。

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

我已经学习了标准 DOM 方法和内部 HTML 方法并且工作正常，但我不知道为什么编写以下代码是错误的：

// 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 显示的内容相同的输出，该怎么办？"hello Herbert"?

Answer 1

因为 "hello <em>Herbert</em>" 包含 html 标签 (em) 所以 innerText 不起作用但 innerHTML 起作用。

Answer 2

文本 "hello <em>Herbert</em>" 不完全是文本，因为其中包含 HTML 内容。对于这种情况，您确实需要使用 innerHTML：

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

Answer 3

主要错误是 innerText 用法。对于大多数目的，我通常会远离它，因为 innerHTML 适用于这两种情况。（文本和标记）

虽然我认为 innerText 如果您想按原样显示 HTML 代码而不是渲染它，它很有魅力。

所以，因为字符串中有一个 HTML 标记，所以它不是普通的文本节点。如果您只是使用 'hello Herbert' 而不是 'hello Herbert' 就可以了。

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);

希望对您有所帮助！查看 http://www.w3schools.com/jsref/met_node_appendchild.asp 了解更多信息。

Answer 4

使用 innerText 时，您只能将不带格式的纯字符串应用于元素。如果您不希望元素内的文本被格式化，则在动态函数中很有用。如果它包含标签，它们将只显示为纯文本。使用 innerHTML，您可以向该元素添加任何内容，包括 HTML-标签。

编辑：现在我刚刚看到您的问题是该元素甚至根本没有显示，我只是觉得您想知道为什么 Herbert 没有斜体。在这种情况下，这是因为您没有像在第一个版本中那样将第二个元素附加到正文中。第三个版本不创建元素，它使用现有元素，因此您不需要附加它。 ;)

Javascript innerHTML

Javascript innerHTML

javascript

innerhtml

createelement