07 JS-DOM之-innerHTML、innerText、textContent

最新推荐文章于 2024-04-30 14:12:13 发布

喝着绿茶的猫

最新推荐文章于 2024-04-30 14:12:13 发布

阅读量680

点赞数

分类专栏： JavaScript-DOM

本文链接：https://blog.csdn.net/luyu13141314/article/details/53397096

版权

JavaScript-DOM 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

value属性

innerHTML(可以识别标签)

innerText

 <body>
 <input type="text" value="我是input的内容"/>

 <div id="box1">
     <ul>
         <li>我用于测试innerHTML</li>
     </ul>
 </div>
 <div id="box2">
     <ul>
         <li>我用于测试innerText</li>
     </ul>
 </div>
 </body>

value属性指的是：

可以输入内容，后者带有value属性的标签的value值。

使用value的话标签必须有value属性。比如button也有value属性，但是一般都是用innerHTML，因为里面的value属性同步不到内容。

总之~双闭合标签一般是用innerHTML

    var inp = document.getElementsByTagName("input")[0];
    console.log(inp.value);
    inp.value = "我是通过value属性赋值的内容！！！";
    console.log(inp.value);

innerHTML：双闭合标签中间的内容。（可以识别标签）

    var box1 = document.getElementById("box1");
    console.log(box1.innerHTML);
    box1.innerHTML = "<a href='http://www.baidu.com'>百度</a>";
    console.log(box1.innerHTML);

这里写图片描述

innerText：双闭合标签中间的内容。（不可以识别标签）

    var box2 = document.getElementById("box2");
    console.log(box2.innerText);
    box2.innerText = "<a href='http://www.baidu.com'>百度</a>";
    console.log(box2.innerText);

这里写图片描述

老版本的火狐中可以识别innerHTML，但是不能识别innerText；识别的是textContent;

    //兼容写法，获取内容:


function getTxt(ele){
    return ele.innerHTML || ele.innerContent;
}

function setTxt(ele,txt){
    if(ele.innerText != undefined){
        ele.innerText = txt;
    }else{
        ele.innerContent = txt;
    }
}

未完待续…

喝着绿茶的猫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
07 JS-DOM之-innerHTML、innerText、textContent

value属性 innerHTML(可以识别标签) innerText <body> <input type="text" value="我是input的内容"/> <div id="box1"> <ul> <li>我用于测试innerHTML</li> </ul> </div> <div id="box2"> <ul>
复制链接

扫一扫

专栏目录