JavaScript 内部 HTML

Question

我目前正在学习Javascript DOM和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 中输入任何内容(包括标签)并希望使用 insideText 来实现与 JSFiddle 显示“hello Herbert”相同的输出，该怎么办？

Answer 1

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

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

所以，因为字符串中有一个 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了解更多信息。