首页 > 编程语言 >【JavaScript35】innerText 和 innerHTML

【JavaScript35】innerText 和 innerHTML

时间:2023-08-10 22:33:44浏览次数:43  
标签:document JavaScript35 innerHTML innerText world 内容 文本

获取内容时

  • innerHTML 从对象的起始位置到终止位置的全部内容,还包括 HTML 标签。
  • innerText 会去掉标签的内容。

innerText和innerHTML 获取内容示例

<div id="demo">
    <p id="p1"><strong>这是文本内容</strong></p>
    hello world!
</div>
<script>
    // 获取文本
    p = document.getElementById('p1');
    console.log(p.innerText);  // 这是文本内容
    console.log(p.innerHTML);  // <strong>这是文本内容</strong>
</script>

innerText和innerHTML设置内容时

  • innerText不会识别html样式
  • innerHTML会识别html样式
    <div>
        <p id="p3"></p>
        <p id="p4"></p>
    </div>
    <script>
        // 设置文本
        p3 = document.getElementById('p3');
        p3.innerText = '<strong>hello world</strong>'
        p4 = document.getElementById('p4');
        p4.innerHTML = '<strong>hello world</strong>'
    </script>

标签:document,JavaScript35,innerHTML,innerText,world,内容,文本
From: https://www.cnblogs.com/xwltest/p/17621772.html

相关文章

  • innerText和innerTml的区别
        ......
  • 【js学习笔记二】innerHTML和innerText的使用
     目录前言导语代码部分 运行结果总结前言   我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很酷导语......
  • text() html() val() innerHTML的区别
    参考text()用于html元素文本内容的存取html()不仅可以用于文本内容的存取,还可用于html内容的存取val()用于input元素内容的存取    html()innerHTML的区别html()方法设置或返回被选元素的内容。当该方法用于返回内容时,则返回第一个匹配元素的内容。当该方法用......
  • outerHtml和innerHtml的区别
    一、区别1)innerHTML:从对象的起始位置到终止位置的全部内容,不包括HTML标签。2)outerHTML:除了包含innerHTML的全部内容外,还包含对象标签本身。二、例子t......
  • 关于 dangerouslySetInnerHTML
    之前不太了解react,第一次看dangerouslySetInnerHTML,以为可以用来防止xss注入。后面看待又补充了一个DOMPurify,才知道这个东西只有一个提醒的作用,并不能防止xss注入DOM元......
  • javaScript DOM - innerText与innerHtml,操作元素的属性,节点的获取,创建,添加,删除,修改
    1.innerText与innerHTML//替换元素里面的内容成文字document.querySelector(".main").innerText="文字";//替换元素里面的内容成标签document.querySelector(".main")......
  • DOM操作元素文本内容:innerHTML、innerText、value
    操作元素文本内容的方法有三种:innerHTML、innerText、value(1)第一种:innerHTML:能够解析内容中的html标签1<body>2<divid="box">3helloworld4......
  • HTMLDOM中innerHTML和样式控制
    HTMLDOM_innerHTML标签体的设置和获取:innerHTMLinnerHTML 属性可用于获取或替换HTML元素的内容。innerHTML 属性可用于获取或改变任何HTML元素,包括 <html> 和 ......
  • js中innerHTML和createElement的效率比较
    结合js中字符串不可变的特性单次执行innerHTML和createElement时效率差不多如果重复执行,因为innerHTML=字符串,需要多次开辟空间存储字符串,所以createElement效率更高.......
  • js中innerHTML与innerText的用法与区别
    div.innerHTML: 也就是从对象的起始位置到终止位置的全部内容,包括Html标签。div.innerText: 从起始位置到终止位置的内容,但它去除Html标......