JS中innerHTML createTextNode innerText outerHTML 区别

最新推荐文章于 2024-03-06 15:12:12 发布
最新推荐文章于 2024-03-06 15:12:12 发布
阅读量526 收藏
点赞数
分类专栏： 前端学习 文章标签： javascript innerHTML createTextNode innerText outerHTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mystric594/article/details/71928848
版权
本文通过实例讲解了JavaScript中innerHTML、createTextNode、innerText和outerHTML的区别。innerHTML和outerHTML处理的是HTML代码，而createTextNode和innerText处理纯文本。outerHTML使用时需要注意先将元素添加到文档中再追加。
摘要由CSDN通过智能技术生成

话不多说，请看栗子：

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
</head>
<body>
<script type="text/javascript">
    //使用createTextNode
    var ele=document.createElement("p");
    var text=document.createTextNode("<b>I love JavaScript<b>");
    ele.appendChild(text);
    document.body.appendChild(ele);
    //使用innerHTML
    var ele2=document.createElement("p");
    document.body.appendChild(ele2);
    ele2.innerHTML="<b>I love JavaScript<b>";

    //使用innerText
    var ele3=document.createElement("p");
    ele3.innerText="<b>I love JavaScript<b>";
    document.body.appendChild(ele3);
    //使用outerHTML
    var ele4=document.createElement("p");
    ele4.setAttribute("id","oh"); //设置id属性
    document.body.appendChild(ele4);//先将该节点添加至body元素中
    oh.outerHTML="<b>I love JavaScript</b>";
</script>
</body>
</html>

最后实现的效果如下（用chrome浏览器/blink内核）：

<b>I love JavaScript<b>

I love JavaScript

<b>I love JavaScript<b>

I love JavaScript


很明显：

  • innerHTML和outerHTML会把整段文本作为一行HTML代码处理，
  • 而createTextNode和innerText只会把内容作为一段纯文本处理。
  • 此外outerHTML要对被id调用，所以应该设置好id属性并且要先将元素添加到文档中，再追加outerHTML，如果按下面的代码执行则不会显示文字：

//使用outerHTML
var ele4=document.createElement("p");
ele4.outerHTML="<b>I love JavaScript</b>";//未被id调用
document.body.appendChild(ele4);

注意：innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器，因此，尽可能地去使用innerHTML，而少用innerText。

这里有一个很不错的图帮助理解：




培根熏肉
关注
专栏目录
Javascript中DOM、BOM区别
枫叶时代的博客
07-31 422
一.Javascript组成 JavaScript的实现包括以下3个部分： ECMAScript(核心) 描述了JS的语法和基本对象。 文档对象模型 （DOM） 处理网页内容的方法和接口 浏览器对象模型（BOM） 与浏览器交互的方法和接口 avascript 有三部分构成，ECMAScript，DOM和BOM，根据宿主（浏览器）的不同，具体的表现形式也不尽相同，ie和其他的...
JS中的节点操作
woaikuangxuefen的博客
08-02 784
DOM的节点操作 create系列方法创建节点 方法 功能 document.createElement（） 创建一个元素节点 document.createTextNode（） 创建一个文本节点 document.createDocumentFragment（） 创建一个文档片段 document.createComment（） 创建一个注释节点 高效创建节点的方...
JavaScript中innerHTML与innerText，createTextNode的区别
weixin_30553777的博客
01-20 84
innerHTML和innerText 它们都会把元素内内容替换掉，区别在于： innerHTML 会把替换内容里的 HTML 标记解释执行。 innerText 会把替换内容里的 HTML 标记原样输出而不执行。 例如有如下代码： var content = "<b>这是对innerHTML和innerText的测试</b>" ; // 假设 e 为网页内某元素 ...
innerHTML和createTextNode的区别
weixin_30364147的博客
07-22 110
innerHTML的用法 　　tablerowObject.innerHTML createTextNode的用法 　　createTextNode(data) 　　返回新创建的 Text 节点，表示指定的data字符串。 区别：1)　　innerHTML属于HTML Dom 　　　　　　createTextNode属于XML Dom 　　　2)　　虽然效果类似但是在某种情况下是...
区别：innerHTML---innerText---createTextNode--document.write
lamanchas的博客
11-01 319
innerHTML---innerText---createTextNode--document.write
js document.createTextNode()创建文本节点详解
热门推荐
田维常
09-23 3万+
在Javascript中，可以创建各种类型的节点。 下面列出常用的创建节点的方法： 方法 说明 createElement() 创建一个元素节点  createTextNode() 创建一个文本节点  createComment() 创建一个文本节点  createDocumentFragment() 创建文档碎片节点 以上四种方法都是 document 对象的方法。
JS中获取元素属性的8大方法
人间草木
11-04 1247
在Web前端开发中经常用到的技术：获取元素属性的一系列方法【innerHTML、outerHTML、innerText 、outerText、value、text()、html()，val()】 这些方法，大家应该用过，如果让你说出它们的一些区别和联系，能答得上来吗？接下来让我们一起来温故下。 首先我们需要把它们归类下： innerHTML、outerHTML、innerText 、out...
JavaScript知识点全面概括与总结(中)
BayMin0-0的博客
03-23 262
61.cookie的理解 cookie 是服务器提供的一种用于维护会话状态信息的数据，通过服务器发送到浏览器，浏览器保存在本地，当下一次有同源的请求时，将保存的 cookie 值添加到请求头部，发送给服务端。这可以用来实现记录用户登录状态等功能。cookie 一般可以存储 4k 大小的数据，并且只能够被同源的网页所共享访问。 服务器端可以使用 Set-Cookie 的响应头部来配置 cookie 信息。一条cookie 包括了5个属性值 expires、domain、path、secure、HttpOnl
JS扩展大全
最新发布
peipei11202的博客
03-06 546
JS扩展大全
createText、innerText、innerHtml的不同
qq_45305088的博客
11-03 147
1.createText var div = document.querySelector("div"); div.onclick = function(){ textNode = document.createTextNode("good"); div.appendChild(textNode) ;//会在已有文本的后面添加good 每点击一次添加一个 } 2.innerText var div = document.querySelector("div"
createTextNode和innerHTML什么区别
Wion Wan
03-05 3821
今天写代码，用到createTextNode，发现好像功能和innerHTML是一样的，于是查阅了网上的资料了。 一、createTextNode 例如: 1 2 3 4 5 var element = document.createElement("div"); element.className = "message"
js之DOM操作（创建文本节点createTextNode）
web前端菜鸟工程师
09-21 3747
创建文本节点createTextNode createTextNode() 方法创建新的文本节点，返回新创建的 Text 节点。 语法： document.createTextNode(data) 参数： data : 字符串值，可规定此节点的文本。 demo： 无标题文档 .message{ width:200px; height:100px; bac
javascript中创建文本节点createTextNode
沈行的博客
11-15 2210
创建文本节点createTextNode createTextNode() 方法创建新的文本节点，返回新创建的 Text 节点。 语法： document.createTextNode(data) 参数： data : 字符串值，可规定此节点的文本。 我们来创建一个元素并向其中添加一条消息，代码如下：
innerHTML和createTextNode()的区别
10-10 205
在做编程小练习时，我发现innerHTML的用法和createTextNode的用法有相似之处，当然区别也是大大滴。 innerHTML createTextNode() 语法 HTMLElementObj...
javascript基础学习系列二百二十二：创建文本节点 document.createTextNode()
wanmeijuhao的博客
01-23 501
元素并给它添加了值为"message"的 class 属性，然后又创建了 一个文本节点并添加到该元素。最后一步是把这个元素添加到文档的主体上，这样元素及其包含的文本 会出现在浏览器中。示例中的第一个div元素中不包含内容，因此不会产生文本节点。只要开始标签和结束标签之间 有内容，就会创建一个文本节点，因此第二个。元素也有一个文本节点的子节点，其 nodeValue 的值为"Hello World!元素会有一个文本节点的子节点，虽然它只包含空 格。一般来说一个元素只包含一个文本子节点。
JavaScript DOM创建元素节点（createElement）创建文本节点（createTextNode）创建注释节点createComment
编程界明世隐的博客
12-16 2087
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK"> </head> <body> <div id="box"> </div> </bo...
js createElement appendChild createTextNode用法
xyjikl
12-09 959
xml不支持innerHTML 北京 //创建 节点，添加到节点中 var divElement=document.createElement("div"); divElement.innerHTML="AFASFD" //父亲.appendChild(子) //document.getElement
JS实现二级联动 (createTextNode，createElement )
qq_41566772的博客
10-30 198
 JS中只有数组，没有集合 数组长度=角标+1    长度可变 cities[0],cities[1],cities[2],cities[3] cities[100]   长度是101   而不是5 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt...
JavaScript中的innerHTML, outerHTML与innerText详解
在JavaScript中，`innerHTML`, `innerText`, 和 `outerHTML` 是处理HTML元素内容的三个重要属性。它们分别用于读取和设置元素内部的HTML、纯文本和完整的HTML结构。 1. **innerHTML**: 这个属性允许我们获取或设置...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值