JS中innerHTML/outerHTML和innerText/outerText以及value 的区别与使用

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

value

value：value是表单元素特有的属性,输入输出的是字符串

如下面的例子，获取到的是他们的value值

<input type="text" id="inP">

<div id="P">

    <p>

    5566555

　　</p>

</div>

<button id="btn" value="123">确定</button>

<script>

    var inP = document.getElementById("inP");

    var P = document.getElementById("P");

    var btn   =document.getElementById("btn");

    btn.onclick=function(){

        console.log("===========input============")

        console.log("value:=="+inP.value);  

        console.log("===========P================")

        console.log("value:=="+P.value);

        console.log("===========button================")

        console.log("value:=="+btn.value);  

          }

</script>

input框输入：123456

最后输出如下：

innerHTML/outerHTML

(1) innerHTML设置或获取标签所包含的HTML+文本信息 (从标签起始位置到终止位置全部内容，包括HTML标签，但不包括自身)

(2)outerHTML设置或获取标签自身及其所包含的HTML+文本信息（包括自身）

如下图所示

来个栗子吧：

<input type="text" id="inP">

 <div id="P">
      <p>5566555</p>
 </div>

<button id="btn" value="123">确定</button>

<script>

    var inP = document.getElementById("inP");

    var P = document.getElementById("P");

    var btn   =document.getElementById("btn");

    btn.onclick=function(){

        console.log("===========input============")

        console.log("innerHTML:=="+inP.innerHTML);

        console.log("outerHTML:=="+inP.outerHTML); 

        console.log("===========P================")

        console.log("innerHTML:=="+P.innerHTML);

        console.log("outerHTML:=="+P.outerHTML); 

        console.log("===========button================")

         console.log("innerHTML:=="+btn.innerHTML);

         console.log("outerHTML:=="+btn.outerHTML);

          }

innerText/outerText

（1） innerText设置或获取标签所包含的文本信息（从标签起始位置到终止位置的内容，去除HTML标签，但不包括自身）

innerText 打印标签之间的纯文本信息，会将标签过滤掉，低版本的火狐浏览器不支持，而是支持textContent

（2） outerText设置或获取标签自身及其所包含的文本信息（包括自身）

innerText和outerText在获取的时候是相同效果，

但在设置时，innerText仅设置标签所包含的文本，而outerText设置包含包括标签 自身在内 的文本

<input type="text" id="inP">

 <div id="P"><p>5566555</p></div>

<button id="btn" value="123">确定</button>

<script>

    var inP = document.getElementById("inP");

    var P = document.getElementById("P");

    var btn   =document.getElementById("btn");

    btn.onclick=function(){

        console.log("===========input============")

        console.log("innerText:=="+inP.innerText);

        console.log("outerText:=="+inP.outerText); 

        console.log("===========P================")

         console.log("innerText:=="+P.innerText);

        console.log("outerText:=="+P.outerText); 

        console.log("===========button================")

        console.log("innerText:=="+btn.innerText);

        console.log("outerText:=="+btn.outerText);

          }

如上图红框所示，innerText和outerText获取值得时候结果是一样的。

inner HTML和innerText的对比
- innerText 打印标签之间的纯文本信息
- innerHtml 打印标签之间的内容，包括标签和文本信息

 <div id="P"><p>5566555</p></div>

<button id="btn" value="123">确定</button>

<script>

    var inP = document.getElementById("inP");

    var P = document.getElementById("P");

    var btn   =document.getElementById("btn");

    btn.onclick=function(){

        console.log("===========P================")

         console.log("innerHTML:=="+P.innerHTML);

         console.log("innerText:=="+P.innerText); 

          }