innerHTL和createTextNode的区别

innerHTML的用法

  tablerowObject.innerHTML

createTextNode的用法

  createTextNode(data)

  返回新创建的 Text 节点,表示指定的 data 字符串。

区别:1)  innerHTML属于HTML Dom

      createTextNode属于XML Dom

   2)  虽然效果类似但是在某种情况下是有区别的

1 var p=document.createElement("p");
2 p.className="message";
3 p.innerHTML="<b>I love js</b>";
4 document.body.appendChild(p);
1 var p=document.createElement("p");
2 p.className="message";
3 var textnode=document.createTextNode("<b>I love js</b>");
4 p.appendChild(textnode);
5 document.body.appendChild(p);

在第一种情况下呈现出的效果是加粗的文本内容

而在第二种情况下呈现出的效果是<b>I love js</b>原文本。

所以两者的区别在于,innerHTML会将文本中包含的HTML代码实现效果,而createTextNode只是纯粹创造了文本节点,所以返回的效果也就是纯文本内容。

时间: 2024-08-29 18:37:18

innerHTL和createTextNode的区别的相关文章

JavaScript中innerHTML与innerText,createTextNode的区别

innerHTML和innerText 它们都会把元素内内容替换掉,区别在于: innerHTML 会把替换内容里的 HTML 标记解释执行. innerText 会把替换内容里的 HTML 标记原样输出而不执行. 例如有如下代码: var content = "<b>这是对innerHTML和innerText的测试</b>" ; // 假设 e 为网页内某元素 e.innerHTML = content ; // 显示结果为 这是对innerHTML和inn

createTextNode和innerHTML区别与换行

今天写代码,用到createTextNode,发现好像功能和innerHTML是一样的,于是查阅了网上的资料了. 一.createTextNode 例如: var element = document.createElement("div"); element.className = "message"; var textNode = document.createTextNode("<Strong>Hello</Strong>&q

createTextNode 和 innerHTML 的区别

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

&lt;pre&gt; &lt;textarea&gt; &lt;code&gt;标签区别

这篇文章里面放的大都是我自己写程序的时候遇到的一些小问题,其实都是自己没有掌握的点,别人看起来应该很简单啦,但写下来能提醒自己,也能鼓励一下自己,这条路也不好走哇. <pre> <textarea> <code>三个标签区别:之所以要说这个,是因为我在写代码的时候遇到这样的问题:需要把html源代码在网页中显示出来,直接写<>这样的标签显然会被浏览器解析,因此我查了一下,可以用<代替< ,>代替>,但是直接这样写会失去代码中的换行等具

原生js与jQuery操作DOM的区别

转自网络 一.创建元素节点 1.1 原生JS创建元素节点 ? 1 document.createElement("p"); 1.2 jQuery创建元素节点 ? 1 $('<p></p>');` 二.创建并添加文本节点 2.1 原生JS创建文本节点 ? 1 `document.createTextNode("Text Content"); 通常创建文本节点和创建元素节点配合使用,比如: ? 1 2 3 var textEl = documen

区别:DOM Core 与 HTML-DOM [转自CSDN]

今天在看JS DOM编程艺术的时候看到 DOM Core 和 HTML-DOM这2个名词,遂上网查询了下,帮助记录和理解: DOM(文档对象模型)是由W3C制定的一套访问和操作XML(eXtensible Markup Language)文档的标准,即API.比如DOM告诉JavaScript引擎如何在浏览器窗口中显示和操作XML创建的标记(Tag). DOM与特定的平台.浏览器.语言无关,很多种语言都实现了DOM,比如因为JavaScript和PHP都实现了DOM,所以 JavaScript中

[转]XML中元素(Element)与节点(Node)的区别

前言: element是特殊的node 一段纯文本即text-node也是node 但不是element w3c的原话是 A node can be an element node, an attribute node, a text node, or any other of the node types explained in the "Node types" chapter. 一.xmlnode类节点: xmlnode类表示xml文档中的单个节点,其命名空间为:System.X

关于let以及var的区别

最近我在看一些文章的时候总是会出现 let 这个关键字,让我很是不解.于是查了一些资料才了解那么一点.... 下面直接进入正题,关于let的定义:let 允许把变量的作用域限制在块级域中.与var的区别在于var 声明要么是全局变量或者是局部变量,而无法变为块级的(还是无法理解块级变量). 直接上代码:   var list = document.getElementById("list"); for (var i = 1; i <= 5; i++) { var item = d

原生JS和jQuery操作DOM的区别小结

一.Js原生对象和jQuery实例对象的相互转化: (1).原生JS对象转JQ对象: $(DOM对象); (2). JQ对象转原生JS对象: $(DOM对象).get(index); //注意区分eq(index)是jQuery实例对象; 直接下标访问, $(DOM对象)[index]; 二.两者操作DOM的对比 一.创建元素节点 1.1 原生JS创建元素/文本节点 1 document.createElement("p"); 1.2 jQuery创建元素/文本节点 1 $('<