码迷,mamicode.com
首页 > Web开发 > 详细

createTextNode和innerHTML区别与换行

时间:2017-04-05 17:34:37      阅读:1249      评论:0      收藏:0      [点我收藏+]

标签:添加   标签   bsp   内容   不能   nbsp   element   lin   style   

 

今天写代码,用到createTextNode,发现好像功能和innerHTML是一样的,于是查阅了网上的资料了。

一、createTextNode 例如:

var element = document.createElement("div");
element.className = "message";
var textNode = document.createTextNode("<Strong>Hello</Strong>");
element.appendChild(textNode);
document.body.appendChild(element);

 

二、innerHTML 例子:结果: <Strong>Hello</Strong>

<div > <h2 id="h2"></h2></div>
document.getElementById("h2").innerHTML = "<strong>hello</strong>";
结果: Hello 识别成加粗的黑体

 

三、换行

var t = document.createTextNode("hello w\norld");
var t = document.createElement("p");
t.innerHTML="HELLO W<br/>orld";

 

四、区别

innerHTML和createTextNode都可以把一段内容添加到一个节点中,区别是如果这段内容中有html标签(如例子中的<strong></strong>)时表现就不同了,在createTextNode中会当作文本处理,不会被浏览器解析,但用innerHTML就会被当作HTML代码处理(如你的例子中Hello会被加粗显示)。
总的来说,如果你确定要插入的内容中没有html标签,可以用innerHTML,这样更简洁,但如果不能确定(比如要插入用户输入的内容)建议用createTextNode的方式。

createTextNode和innerHTML区别与换行

标签:添加   标签   bsp   内容   不能   nbsp   element   lin   style   

原文地址:http://www.cnblogs.com/vitabebeauty/p/6669624.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!