（1）innerHTML对div标签的控制
div标签跟span标签是不一样的，div是一个层的块，span是一行，我们下面看演示就知道区别了。先来看一段控制div的代码。
<script language="javascript">
function chageDiv(number)
{
if (number == 1) {
document.getElementById("div1").innerHTML = "值为1";
}
if (number == 2) {
document.getElementById("div1").innerHTML = "值为2";
}
}
</script>
DIV块测试：<div id="div1">默认值</div>
<a href="#" onClick="chageDiv(1)">改变值为1</a>
<a href="#" onClick="chageDiv(2)">改变值为2</a>
运行的时候，点击“改变值为1”那么“默认值”这个内容将会被改变为“值为1”，但是注意其中的界面，就是会发现“DIV测试：”和“默认值”是两行显示的，因为DIV是按块来显示的。
（2）innerHTML对span的控制
与div类似，但是它是按照行来显示的，看下面的代码：
function chageSpan(number)
{
if (number == 1) {
document.getElementById("span1").innerHTML = "值为1";
}
if (number == 2) {
document.getElementById("span1").innerHTML = "值为2";
}
}
</script>
Span行测试：
<span id="span1">默认值</span><br>
<a href="#" onClick="chageSpan(1)">改变值为1</a>
<a href="#" onClick="chageSpan(2)">改变值为2</a>
当点击“改变值为1”的时候，“默认值”将变为“值为1”，但是“Span行测试”和“默认值”是在同一行显示的，跟DIV不一样。
另外一个值得注意的就是，不管是div还是span，后面的名字都是以为id来定义的，不是象表单一样是使用name来定义的。
innerTEXT与innerHTML的区别：
<BODY>
<div id="d" style="background-color:#ff9966">这是一个层</div>
<input type="button" value="获取innerHTML" onclick="getinnerHTML()">
<input type="button" value="设置innerHTML" onclick="setinnerHTML()">
<script language="javascript">
function getinnerHTML()
{
alert(document.getElementById("d").innerHTML)
}
function setinnerHTML()
{
document.getElementById("d").innerHTML="<div id='d' style='background-color:#449966'>这是一个层,嘿嘿</div>"
}
</script>
<div id="clock">这是一个层</div>
<script language="javascript">
function test()
{
var timevalue = new Date();
document.all.clock.innerText = timevalue.getYear() + "-" + (timevalue.getMonth()+1) + "-" + timevalue.getDay() + " " + timevalue.getHours() + ":" + timevalue.getMinutes();
}
</script>
<input type="button" value="获取innerText" Onclick="alert(clock.innerText)">
<input type="button" value="设置innerText" onclick="test()">
- 大小: 2.5 KB
分享到：
相关推荐
### JavaScript中的innerHTML与innerText的用法与区别 在前端开发中，经常需要用到JavaScript来操作DOM元素，其中`innerHTML`和`innerText`是非常重要的属性，它们分别用于获取或设置元素内部的HTML内容和纯文本...
在 JavaScript 中，innerHTML 和 innerText 是两个常用的属性，它们用于获取 HTML 元素中的内容。虽然它们都是用于获取内容的，但它们在获取内容的方式和结果上有所不同。 innerHTML 属性 innerHTML 属性用于获取 ...
上例中的test[removed]的值也就是“<span xss=removed>test1</span> test2 ”。... test.outerHTML: 除了包含innerHTML的全部内容外, 还包含对象标签本身。 上例中的text.outerHTML的值也就是<div i
html js innerHTML outerHTML innerText outerText 等的区别及实例汇总
在编程领域，尤其是在Web开发中，常常会遇到与HTML元素操作相关的属性，其中`InnerHtml`和`InnerText`是两种常见的属性，它们在处理网页内容时有着不同的行为和用途。本文将深入探讨这两个属性的区别，并提供详尽的...
.innerHTM、outerHTML、innerText、outerText的用法与区别 .innerHTML、outerHTML、innerText、outerText是HTML文档对象模型（DOM）中四个常用的属性，它们都是用来操作HTML元素的内容的，但它们之间有着很大的区别...
3. innerHTML与innerText 各代表什么含义？ innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器，因此，尽可能地去使用innerHTML，而少用innerText，如果要输出不含HTML标签的内容，可以使用innerHTML取得...
根据提供的文件信息，我们可以深入探讨三个重要的DOM属性：`innerHTML`、`innerText`以及`outerHTML`。这些属性在Web开发中非常关键，用于获取或设置元素内部的内容。接下来将详细解析这些属性的功能、用途及差异。 ...
在javascript中如果我们要获取对象内容，js为我们提供了三种方法outerhtml、innerhtml和innertext,但他们之间具体怎么使用与具体的区别在哪里，可能很多人不知道吧，接下来跟着小编一起来学习innerHTML，innerText，...
**四、innerHTML与innerText的区别（demo4）** `innerHTML`和`innerText`都是用于设置或获取HTML元素的文本内容，但它们之间存在差异。`innerHTML`不仅包含文本，还包含元素的HTML结构，可以用来修改或获取HTML代码...
内文基于innerHTML的跨浏览器innerText函数，带有替换项。 innerText是一个功能，不是标准化的，但支持Chrome和IE。 Firefox没有。 有多种方法可以实现innerText功能。 您可以获取一个选择window.getSelection() ，...
6. **innerHTML与innerText**：`innerHTML`用于获取或设置元素的HTML内容，而`innerText`则获取或设置纯文本内容。 Chapter08 "充实文档内容"进一步扩展了动态操作DOM的方法，主要包括： 1. **元素选择**：`...
document对象中有innerHTML、innerText这两个属性，都是获取document对象文本内容，但使用起来还是有区别的； 1） innerHTML设置或获取标签所包含的HTML+文本信息(从标签起始位置到终止位置全部内容，包括HTML标签，...
4. **与innerText的区别**：`innerText`属性与`innerHTML`相似，但它只返回或设置纯文本，不包含任何HTML标记。这意味着`innerText`在处理文本内容时更安全，但缺乏对HTML结构的控制。 5. **DOM操作的最佳实践**：...
5. **innerHTML与innerText**：`innerHTML`用于获取或设置元素的HTML内容，而`innerText`则只关注纯文本内容。 6. **DOM操作性能优化**：避免频繁操作DOM，可以先在内存中构建新的DOM树，然后再一次性替换，减少...
在实际应用中，结合文档就绪函数与`innerHTML`、`innerText`可以方便地实现在用户交互时动态更新页面内容，提升用户体验。同时，熟悉并掌握各种DOM操作方法，如选择和操作元素，是JavaScript开发中的重要技能。在...
首先，我们需要理解`innerHTML`的工作原理。当设置一个元素的`innerHTML`时，浏览器会做以下几件事： 1. 清空当前元素的所有子节点。 2. 解析新设置的HTML字符串，生成一个DOM树。 3. 将新的DOM树插入到原始元素的...