innerHTML&outerHTML&innerText&outerTex

draveness 发布于2019-08-23 13:56 / 406人阅读

摘要：有时候做项目会用到上述四个属性来获取文档里的一些内容，但对他们的区别还是有些模糊，所以写了几个简单的函数，通过打印在控制台上的结果看看他们之间的区别。

有时候做项目会用到上述四个DOM属性来获取HTML文档里的一些内容，但对他们的区别还是有些模糊，所以写了几个简单的函数，通过打印在控制台上的结果看看他们之间的区别。

代码：


    outer
    inner one
    between
    inner two

var showInnerHTML = function(){
    console.log(document.getElementById("outer").innerHTML);
  }
  var showOuterHTML = function(){
    console.log(document.getElementById("outer").outerHTML);
  }
  var showInnerText = function(){
    console.log(document.getElementById("outer").innerText);
  }
  var showOuterText = function(){
    console.log(document.getElementById("outer").outerText);
  }

innerHTML

控制台结果：

总结：获取当前节点下子节点的HTML文本，如果子节点只有文本节点，则它的输出效果和innerText相同

outerHTML

控制台结果：

总结：获得包括当前节点本身以及节点下子节点的HTML文本

innerText

控制台结果：

总结：获得当前节点子节点内的纯文本内容

outerText

控制台结果：

总结：获得当前节点以及子节点内的纯文本内容（总感觉和innerText的输出效果是一样的，没想到什么例子可以有不同的效果，如果你有，欢迎评论(#^.^#)）

疑问：可以看到innerText的输出结果中，中间有一个空行，并不是很懂……

虽然是简单的例子，但是通过代码把概念区分了一下，也是挺好的~如果有写得不足的，欢迎指正留言~不胜感激！

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99812.html

利用js实现点击按钮实现图片排序

　　利用JS就可以实现在点击按钮实现图片排序，做个狠人，直接说：　　效果　　1 、点击按钮　　如果按钮文字是从大到小将li标签按照从大到小的顺序排列文字改成从小到大　　如果按钮文字是从小到大将li标签按照从小到大的顺序排列文字变成从大到小　　2 、点击按钮将li随机排序　　<style> 　　*{ 　　padding:0; 　　margin:0; 　　list-style:n...

3403771864 2022-10-23 13:49 评论0 收藏0
js实现音乐播放器

　这篇文章为大家讲如何用JSd代码实现音乐播放。　　音乐播放的主要js代码　　音乐数据的数组对象　　这里不仅有前端网页提供数据，还有为后面的js代码提供了音乐路径，分享给大家。　　{ 　　ablum:"海阔天空", 　　artist:"Beyond", 　　id:1, 　　name:"大地", 　　path:"musics/1...

3403771864 2022-09-18 22:31 评论0 收藏0
innerHTML、innerText、textContent、outerHTML和value，傻傻

摘要：会省略内嵌的标签名，所以文本的只显示了的内容，并没有显示的标签名也必须是标签对的形式删除了格式信息，所有文本均在一行，所以文本的内容都在一行。也用来设置或获取成对标签之间的内容，并且只关注文本信息。之前，是不支持的。是的亲儿子，放心用吧。原文地址：https://www.xksblog.top/innerHTML-innerText-textContent-outerHTML-val...

HollisChuang 2019-08-23 11:35 评论0 收藏0
使用js对被转义的特殊符号（如：&amp;nbsp;）进行反转义

var a = & alert(a); var c = document.createElement(div); c.innerHTML = a; a = c.innerText || c.textContent; c = null; alert(a); 吃水不忘挖井人：http://jsfiddle.net/xqin/6jra...

wums 2019-08-20 12:28 评论0 收藏0
innerHTML、innerText、outerHTML、outerText区别。

摘要：设置或获取对象起始标签和结束标签之间的内容。使用上面的操作执行输出执行输出注意到区别了吗，输出中的内容时，标签是不包含在内的。在设置时，执行此时页面显示的内容是，此时标签名没有被解析，当作字符原样输出。 1.innerHTML:设置或获取对象起始标签和结束标签之间的内容。如： hello world segmentfault dazhuaoyao 执行console.log(doc...

lbool 2019-08-20 14:49 评论0 收藏0