码迷,mamicode.com
首页 > Web开发 > 详细

innerHTM,LouertHTML,innerText,outerText,nodeValue区别

时间:2017-08-23 14:53:44      阅读:224      评论:0      收藏:0      [点我收藏+]

标签:dom   style   width   lan   元素   文档   doctype   logs   val   

1.innerHTML
  写入的标签会被解析成元素
  oBox.innerHTML = "<strong>123</strong>";

   返回包括标签在内的所有内容
   console.log(oBox.innerHTML); 

 


2.outerHTML 
  设置/修改包括自身元素在内的内容

 

  会解析标签

 

 

3.innerText
  写入的标签不会被解析 当做文本插入
  oBox.innerText = "<strong>123</strong>";

  返回标签中的文本内容(不包括标签    
  console.log(oBox.innerText);
  只获取其中文本文档;

4.outerText

  设置/修改包括自身元素在内的所有文本内容

  不会解析标签

 

5.nodeValue
  不能直接操作某个dom元素,针对非元素节点设置值/返回值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

</head>
<body>
    <div id = "box">
        div
        <span>span</span>
    </div>
</body>
</html>

技术分享

 

 

 1.innerHTML

<script>
    var oBox = document.getElementById("box");
    oBox.innerHTML = "<p><strong>123</strong></p><p>456</p>";

</script>    

 

技术分享

 

 

 2.outerHtTML

<script>
    var oBox = document.getElementById("box");
    

    oBox.outerHTML = "<p><strong>123</strong></p><p>456</p>";

</script>

 注意布局发生的改变

技术分享

 

 

 3.innerText

<script>
    var oBox = document.getElementById("box");
    
    oBox.innerText = "<p><strong>123</strong></p><p>456</p>";
    

</script>

技术分享

 

 

 4.outerText

<script>
    var oBox = document.getElementById("box");

    oBox.outerText = "<p><strong>123</strong></p><p>456</p>";
    
</script>

 

技术分享

 

 

 5.nodeValue

只针对非元素节点进行操作 

对元素节点操作无效 可能会报undefined错误

<script>
    var oBox = document.getElementById("box");
    
    oBox.childNodes[0].nodeValue = "<p><strong>123</strong></p><p>456</p>"
</script>

 

技术分享

 

innerHTM,LouertHTML,innerText,outerText,nodeValue区别

标签:dom   style   width   lan   元素   文档   doctype   logs   val   

原文地址:http://www.cnblogs.com/vicky77/p/7417740.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!