createTextNode和innerHTML区别与换行

今天写代码,用到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的方式。

时间: 2024-08-26 05:38:08

createTextNode和innerHTML区别与换行的相关文章

JS-003-JavaScript 操作常见 web 元素之三-innerText 与 innerHTML 区别

此文主要讲述在使用 innerText 和 innerHTML 获取元素中间值时的差别,我个人将二者的区别简单的理解为: webelement.innerText : 获取的是页面元素显示的文本 webelement.innerHTML : 获取的是元素中间的 HTML 源码 闲话少述,就此上码.敬请小主参阅,若有不足之处,敬请大神指正,不胜感激! 对应的 HTML 页面源码如下所示: 1 <html> 2 <head> 3 <meta charset='utf-8'>

createTextNode 和 innerHTML 的区别

createTextNode创建文本节点:创建的是纯文本,创建完后是未被插入DOM的节点树.需要用到appendChild之类的方法. 例子: //获取节点ID位置 var testdiv = document.getElementById("testdiv") //首先是创建一个节点P var ppp = document.createElement("p"); //创造一个文本节点 var textp = document.createTextNode(&quo

换行符在textarea、div、pre中的区别

关于换行符,网上有许多说法,IE早期的浏览器是\r\n,有的浏览器是\r,但很难找到确切的版本号.经过本人正则匹配测试,chrome.firefox.safari.IE11都是\n, 因此保险起见,若对换行符进行正则匹配,应当同时匹配\n, \r以及\r\n. 值得一提的是\n.\r和\r\n都有换一行的效果,有些同学写换行时常写作\n\r,这就相当于换了两行,因此必须注意! 换行符用于textarea textarea内的换行便是以换行符的形式实现,换行符也能用于textarea 换行符用于一

$(())、$()、${}的区别和\n、\t的区别与printf的使用

$(())用法,可以执行算数运算,加$能返回它的运算结果,类似于let,expr之类的,但是写法不同 [[email protected]_207_144_centos opt]# echo $((1+2)) 3 [[email protected]_207_144_centos opt]# expr 1 + 2 3 $()用法,表示一个范围,会把结果返回给变量,类似于``这样的 [[email protected]_207_144_centos opt]# echo $(pwd) /opt [

【VC++】换行符,回车,单引号,双引号,斜杠\,退格

VC++ 换行符.回车.单引号.双引号.退格.跳格.斜杠\.特殊字符功能详解,\r\n = chr(13)+chr(10),VC++ \n 换行符号,VC++ \n 换行符,VC++ 换行符号,VC++ \n 换行,VC++ \n 符号,VC++ 换行符,VC++ 换行,VC++ \n,VC++ \n 换下一行,VC++ \n 换下行,VC++ \n 换一行,VC++ \n 下一行,VC++ 换下一行,VC++ \n 下行,VC++ 换下行,VC++ 换一行,VC++ 下一行,VC++ 下行,\

静态Web开发 DOM

四章 Dom 1节dom中的顶级对象 dom(文档对象模型)js最终是要操作html页面,让html变成DHtml,而操作Html页面就要用到DOMDOM可以吧Html页面模拟成一个对象,如果js只是执行一些计算.循环等操作,而不能操作Html也就失去了它存在的意义 window.onload=function(){ //1 window.fm.btn.onclick=function(){ //window.id 的方式获得元素(如果嵌套很多次,会非常麻烦) alert('大家好!'); }

JavaScript中DOM的层次节点(一)

DOM是针对HTML和XML文档的一个API,描绘了一个层次化的节点树,允许开发人员添加.修改.删除节点的一部分. DOM将HTML和XML文档描绘成一个有多个节点构成的结构,节点分为12种不同的节点类型,每种都拥有自己的特点.数据和方法,并且和其他节点存在着某种关系. html元素称为文档元素,所有的元素都包含在文档元素中,并且每个文档只有一个html元素. 1 Node类型 DOM1级定义了Node接口,该接口由DOM中的所有节点类型实现.这个接口在JavaScript中是作为Node类型实

如鹏网 静态Web开发 第四章:JSDom

本章主干知识点: 1.<a onclick="f1()"/> document.getElementById("btn1").onclick=function(){} 2.setInterval.setTimeout 3.事件冒泡以及如何阻止事件冒泡: 4.如何动态创建元素和动态添加元素: 5.innerText和innerHTML区别 6.案例:动态加载数据到table中: ---------------------------------------

HTML5入门

HTML5的初步认识 一.HTML5的初步认识 关于html5的一些历史可以通过这篇博客了解:https://www.cnblogs.com/fly_dragon/archive/2012/05/22/2513716.html 1.为HTML5建立的一些规则: 新特性应该基于HTML.CSS.DOM以及JavaScript 减少对外部插件的需求(比如flash) 更优秀的错误处理 更多取代脚本的标记 HTML5应该独立于设备 开发进程应对公众透明 2.HTML5新特性 用于绘画的canvas元素