我目前正在学习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”相同的输出,该怎么办?
最佳答案
主要错误是 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了解更多信息。
关于JavaScript 内部 HTML,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31316445/