createTextNode和innerHTML什么区别

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

一、createTextNode 例如:

1
2
3
4
5
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 例子:

1
2
<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的方式。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值