和 innerHTMl什么区别
![](http://img1.sycdn.imooc.com/user/5333a0600001f9ed02000200-80-80.jpg)
2014-10-31
23 回答
一、createTextNode 例如:
var element = document.createElement("div"); element.className = "message"; var textNode = document.createTextNode("<Strong>Hello</Strong>"); element.appendChild(textNode); document.body.appendChild(element);
结果: <Strong>Hello</Strong>
二、innerHTML 例子:
<div > <h2 id="h2"></h2></div> document.getElementById("h2").innerHTML = "<strong>hello</strong>";
结果: Hello 识别成加粗的黑体
三、区别
innerHTML和createTextNode都可以把一段内容添加到一个节点中,区别是如果这段内容中有html标签(如例子中的<strong></strong>)时表现就不同了,在createTextNode中会当作文本处理,不会被浏览器解析,但用innerHTML就会被当作HTML代码处理(如你的例子中Hello会被加粗显示)。
总的来说,如果你确定要插入的内容中没有html标签,可以用innerHTML,这样更简洁,但如果不能确定(比如要插入用户输入的内容)建议用createTextNode的方式。
一、createTextNode
createTextNode() 方法创建新的文本节点,返回新创建的 Text 节点。
语法:
document.createTextNode(data)
参数:
data : 字符串值,可规定此节点的文本。
-------------------------------------------------------------------------------------------------------
二、innerHTML 属性
innerHTML 属性用于获取或替换 HTML 元素的内容。
语法:
Object.innerHTML
注意:
1.Object是获取的元素对象,如通过document.getElementById("ID")获取的元素。
2.注意书写,innerHTML区分大小写。
举报