07 JS-DOM之-innerHTML、innerText、textContent

最新推荐文章于 2024-04-30 14:12:13 发布
最新推荐文章于 2024-04-30 14:12:13 发布
阅读量676 收藏
点赞数
分类专栏： JavaScript-DOM
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/luyu13141314/article/details/53397096
版权

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
    评论
专栏目录
js DOM 的 innerText 和 innerHTML
qq_41045651的博客
07-06 265
时应当注意安全性，避免将不受信任的内容直接插入到 HTML 中，以防止潜在的安全风险（如跨站脚本攻击）。是一个属性，用于获取或设置元素的 HTML 内容。它返回元素及其子元素的 HTML 标记字符串，包括 HTML 标签和文本内容。是一个属性，用于获取或设置元素的纯文本内容。它会返回元素及其子元素的文本内容，但不包含任何 HTML 标签。或创建 DOM 元素，并使用安全的方法进行内容的设置和替换。也是一个可写属性，可以用来修改元素的 HTML 内容。是一个可写属性，可以用来修改元素的文本内容。
Web的基本漏洞--XSS漏洞
尽欢的博客
05-31 3317
XSS漏洞介绍、XSS漏洞的攻击方式--注入脚本代码
最全--跨站脚本攻击（XSS）举例和预防方法
最新发布
Keep trying, keep going
04-30 1299
跨站脚本攻击（XSS）是指攻击者通过，从而窃取用户信息、篡改网页内容等。。
HTML DOM基础知识及value、innerHTML、innerText属性的区别
cnds123的专栏
06-19 1279
本文首先介绍HTML DOM基础知识，再介绍JS中value、innerHTML、innerText属性的区别
innertext和outertext以及div
12-10
innertext和outertext以及div,在编写网页时经常用到的,很好用.
HTML DOM中innerHTML、textContent和innerText属性的用法与区别
青春木鱼的博客
05-21 7553
想要获取、设置标签的内容，innerHTML以及innerText、textContent都可以使用，如果在标签中设置新的html标签内容，innerText、textContent会忽略新的html标签，仅获取纯文本内容，但innerText、textContent属性会解析标签里特殊符号，把特殊符号翻译为正文。innerHTML可以获取所有的html标签内的内容，包括新的html标签，每一个字符都会原样输出，所写即所得，且新的html标签，不会被解析，也就是没有标签效果，但输出到浏览器页面会被浏览器正常
Javascript--DOM.rar_javascript
09-24
3. 修改元素：`innerHTML`用于更改元素内容，`innerText`或`textContent`获取或设置纯文本内容，`setAttribute`和`getAttribute`处理属性。 四、事件处理 JavaScript可以监听并响应用户的交互事件，如点击、鼠标...
javaScript-dom
03-17
4. **修改元素**：可以使用 `.innerHTML`、`.textContent` 或 `.innerText` 修改元素的内容，`.style` 属性用于更改样式。例如，`element.style.color = 'red'` 将改变元素的颜色。 5. **事件处理**：JavaScript ...
JS-3-DOM-Ejercicio
02-13
10. **性能优化**：避免频繁的DOM操作，使用`textContent`代替`innerHTML`以提高效率，以及利用`createDocumentFragment`批量操作DOM等技巧。 通过这个"JS-3-DOM-Ejercicio"项目，开发者可以深入理解JavaScript与...
JavaScript-DOM
03-09
JavaScript-DOM的学习主要包括以下几个核心知识点： 1. **DOM结构**：理解DOM树的概念，每个HTML元素都是一个节点，包括元素节点、文本节点、属性节点等。比如，`<div id="example">Hello, World!</div>` 在DOM中...
wksp-module-3-js-the-dom
03-08
4. **修改元素**：使用`innerHTML`、`innerText`、`textContent`可以改变元素的内容，`style`属性可以修改元素的内联样式。`setAttribute()`和`removeAttribute()`则用于设置或移除元素的属性。 5. **创建和插入...
innerText
JAVA_LiShaonan的专栏
11-12 1167
通过innerText属性可以操作元素中包含的所有文本内容，无论文本位于子文档树中的什么位置。在通过innerText读取值是，它会按照由浅入深的顺序，将子文档树中所有文本拼接起来。以下面的HTML代码为例： id="mydiv">   This is a paragraph with a list following it.       Item 1     Item 2     Item
前端基础知识之JS DOM
qq_48617322的博客
08-02 242
文章目录
关于xss攻击解决方案
susanliy的博客
01-11 2855
如何防止XSS攻击？1.innerHTML —xss攻击2.DOMParser().parseFromString（）–性能最差，会受到xss攻击3.Range.createContextualFragment()–会执行内联的script js代码，这个方法尽量不要使用，不安全4.insertAdjacentHTML（）–会受到xss攻击5.createContextualFragment （）–安全性能差，会受到xss攻击。
WebAPI基础 设置/修改DOM元素内容 innerText和innerHTML的使用
weixin_49524392的博客
05-31 378
基本格式：对象.innerText = ‘要设置/修改的内容’基本格式：对象.innerHTML = ‘要设置/修改的内容’不加标签时二者效果相同，所以推荐使用innerHTML。一、innerText 添加或修改标签的内容，二、innerHTML 添加或修改标签的内容，不加标签时与innerText的效果是一样的。这里我们用一个简单的div举例。总结：innerText。不会解析文本中包含的标签。只识别内容，不解析标签。
DOM操作-03-innerHTML、innerText
qq_41874591的博客
04-22 292
innerHTML、innerText和nodeType
JS-DOM编程-02-innerHTML和innerText属性
TSCCG的博客
08-05 778
JS-DOM编程-02-innerHTML和innerText属性 1.innerHTML属性 innerHTML属性可以设置对象里的内容。 1.1直接赋值给innerHTML以改变div 实现点击按钮，就可以向div里添加内容。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content
解决v-html指令潜在的xss攻击
lingxiaoxi_ling的博客
04-29 1万+
我们首先来看一个例子 运行之后由于src地址对应的资源找不到，会触发img标签的error事件，最终alert弹框。这便是一个最简单的xss攻击。 html指令的运行原理 v-html指令源码 // /vue/src/platforms/web/compiler/directives/html.js export default function html (el: ASTElement, di...
innerText 与 innerHtml的区别 （一）
热门推荐
安静的对折的专栏
09-16 4万+
innerText  与 innerHtml 都是打印标签之间的文本信息 1、innerText 打印标签之间的纯文本信息，会将标签过滤掉，低版本的火狐浏览器不支持，而是支持textContent Document 这是P标签 这是P标签 这是P标签 var box = docu
js的dom
05-27
DOM（Document Object Model）是指文档对象模型，它是 HTML 和 XML 文档的编程接口。通过 DOM，开发者可以对文档的内容和结构进行访问和操作。 在 JavaScript 中，可以通过访问 DOM 来改变 HTML 页面的内容、结构和样式。通过 DOM，可以选择元素节点、添加、删除和修改元素、修改元素的样式、属性和内容等。 DOM 将 HTML 文档表示为一个树形结构，其中每个 HTML 元素都是一个节点。树的根节点是 document 对象，它代表整个文档。通过 document 对象，可以获取 HTML 页面中的任何元素。 以下是一些常用的 DOM 操作： - 选择元素：可以使用 document.querySelector() 或 document.querySelectorAll() 方法来选择 HTML 元素。 - 添加元素：可以使用 document.createElement() 方法来创建一个新的 HTML 元素，并使用 appendChild() 或 insertBefore() 方法将其添加到文档中。 - 删除元素：可以使用 removeChild() 方法来删除 HTML 元素。 - 修改元素：可以使用 innerHTML、innerText 或 textContent 属性来修改元素的内容，使用 setAttribute() 方法来修改元素的属性，使用 style 属性来修改元素的样式。 以下是一个简单的示例，演示了如何通过 DOM 操作修改 HTML 页面上的元素： ``` <!DOCTYPE html> <html> <head> <title>DOM Example</title> </head> <body> <h1 id="title">Hello World!</h1> <script> // 选择元素 var title = document.querySelector("#title"); // 修改元素 title.innerHTML = "Welcome!"; title.style.color = "red"; // 添加元素 var paragraph = document.createElement("p"); paragraph.innerHTML = "This is a paragraph."; document.body.appendChild(paragraph); // 删除元素 var body = document.body; body.removeChild(title); </script> </body> </html> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值