JS DOM innerHTML和innerText

简介: JS DOM innerHTML和innerText在JavaScript中,我们可以使用innerHTML属性很方便地获取和设置一个元素的“内部元素”,也可以使用innerText属性获取和设置一个元素的“内部文本”例如,我们用innerHTML来向HTML文档中添加一张图片:


JS DOM innerHTML和innerText


在JavaScript中,我们可以使用innerHTML属性很方便地获取和设置一个元素的“内部元素”,也可以使用innerText属性获取和设置一个元素的“内部文本”

例如,我们用innerHTML来向HTML文档中添加一张图片:


document.body.innerHTML='<img class="pic" src="https://img2.baidu.com/it/u=1536235831,228402327&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=390" style="border:1px solid silver"/>';


再例如,获取innerHTML和innerText:


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>TEXT</title>
    <script src="js/index.js"></script>
</head>
<body>
    <p id="content">
        <strong style="color:red;">测试</strong>
    </p>
    innerHMTL:<input id="txt1" type="text"/><br/>
    innerText:<input id="txt2" type="text">
</body>
</html>


window.onload=function () {
  var oP = document.getElementById("content");
  document.getElementById("txt1").value = oP.innerHTML;
  document.getElementById("txt2").value = oP.innerText;
}


浏览器输出如下:


d7b65b6e44b346abadff357a6f4fa203.png


innerHTML获取的是元素内部所有的内容,而innerText获取的仅仅是文本内容🎶

目录
相关文章
|
28天前
|
JavaScript 前端开发 Go
CSS 与 JS 对 DOM 解析和渲染的影响
【10月更文挑战第16天】CSS 和 JS 会在一定程度上影响 DOM 解析和渲染,了解它们之间的相互作用以及采取适当的优化措施是非常重要的。通过合理的布局和加载策略,可以提高网页的性能和用户体验,确保页面能够快速、流畅地呈现给用户。在实际开发中,要根据具体情况进行权衡和调整,以达到最佳的效果。
|
14天前
|
JavaScript 前端开发 索引
js中DOM的基础方法
【10月更文挑战第31天】这些DOM基础方法是操作网页文档结构和实现交互效果的重要工具,通过它们可以动态地改变页面的内容、样式和行为,为用户提供丰富的交互体验。
|
15天前
|
JavaScript 前端开发 开发者
.js的dom元素操作
【10月更文挑战第29天】通过灵活运用这些 DOM 元素操作方法,JavaScript 可以实现丰富的网页交互效果,如动态更新页面内容、响应用户操作、创建和删除页面元素等。在实际开发中,开发者可以根据具体的需求和场景,选择合适的 DOM 元素操作方法来实现所需的功能,为用户提供更加流畅和动态的网页体验。
|
1月前
|
移动开发 JavaScript 前端开发
原生js如何获取dom元素的自定义属性
原生js如何获取dom元素的自定义属性
48 4
|
2月前
|
JavaScript 前端开发 索引
JavaScript HTML DOM 节点列表
JavaScript HTML DOM 节点列表
20 5
|
2月前
|
JavaScript 前端开发 索引
JavaScript HTML DOM 集合(Collection)
JavaScript HTML DOM 集合(Collection)
28 4
|
2月前
|
JavaScript 前端开发 索引
你可能没有听说过 js中的 DOM操作还有这个: HTMLCollection 和 NodeList
该文章详细解释了JavaScript中HTMLCollection和NodeList这两种DOM集合类型的特性、使用方法及其区别,并通过实例代码展示了如何操作这两种集合来选取和遍历DOM元素。
|
2月前
|
JavaScript 前端开发
JavaScript HTML DOM 元素 (节点)
JavaScript HTML DOM 元素 (节点)
27 2
|
2月前
|
XML 移动开发 JavaScript
js中BOM和DOM总结(基础篇)
文章总结了JavaScript的BOM和DOM知识点,包括window、screen、location、history、navigator对象,以及消息框、计时器和cookie。同时,介绍了DOM的概念、节点获取和修改方法,以及事件处理。
js中BOM和DOM总结(基础篇)
|
1月前
|
JavaScript 前端开发 容器
js之dom学习
js之dom学习
35 0