最近在学习JavaScript，觉得innerHTML和innerText太有用了，利用它们，我们可以试自己的网页实现动态化。不过在使用的过程中，千万要注意它们的大小写，因为错一点您就得不到预期的效果了。这是全新的方法，当您掌握它以后将可随心所欲的设计动态内容了，不可错过哦！
一:动态改变文本和Html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type content="text/html;charset=UTF-8">
<title>innerText和innerHTML用法实例</title>
<script language="JavaScript" type="text/javascript">
function changeText() {
DT.innerText="我很好!";
}//function
function changeHtml() {
DH.innerHTML="<i><u>我姓肖!</u></i>";
}//function
function back() {
DT.innerText="您好吗?";
DH.innerHTML="您姓什么?";
}
</script>
</head>
<body>
<p><font color="gray">请点击下边的文字……</font>
<ul>
<li id="DT" onclick="changeText()">您好吗? </li>
<li id="DH" onclick="changeHtml()">您姓什么? </li>
<li onclick="back()">恢复原样! </li>
</ul>
</body>
</html>
innerText属性用来定义对象所要输出的文本，在本例中innerText把对象DT中的文本“您好吗?”变成了“我很好!”（语句DT.innerText="我很好!"）。而对对象DH的改变用了innerHTML属性，它除了有innerText的作用外，还可改变对象DH内部的HTML语句，于是它把文本变成了“我姓肖!”，而且文本输出改成了斜体（<i></i>）并下加一条直线（<u></u>），即语句DH.innerHTML="<i><u>我姓肖!</u></i>"。
二:文本的动态输入与输出
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用innerText和innerHTML制作动态网页</title>
<style type="css/text">
.blue {
color:blue;
font-size:12pt;
}
</style>
<script language="JavaScript" type="text/javascript">
function OutputText() {
if(frm.txt.text!="") {
Output.innerHTML="在此处输出文本：<u>"+frm.txt.value+"</u>";} //Output为一对象。
else {
Output.innerText="在此处输出文本：";}
}//function
</script>
</head>
<body>
<p><br></p>
<form name="frm">
<p>
<font color="gray">请在文本框中输入文字:</font>
<input type="text" name="txt" size="50">
<br>
<input type="button" value="输出文本" name="B1" class="blue" onclick="OutputText()">
</p>
</form>
<p id="Output">
在此处输出文本：
</p>
</body>
</html>
此例的效果是先在文本框中输入文本，然后按“输出文本”的按钮，接着网页便会自动输出您所输入的文本
三:注意innerHTML有自动检查语法的功能,它会把不完整的HTML代码补充完整,这点可以说是神奇,例如下面的这段脚本
function Get()
{
document.getElementById("tab").innerHTML="<table><tr>";
alert(document.getElementById("tab").innerHTML);
}
运行的效果竟然是这样的:
<TABLE><TBODY><TR></TR></TBODY></TABLE>
所以请各位在使用时一定要小心.
例如在做这样的操作时就会出错.
运行的效果竟然是这样的:
list.innerHTML="<table><tr>";
list.innerHTML+="<td>"
............
必须用一个中间变量
var html="<table><tr>";
html+="<td>";
.........
list.innerHTML=html;
这样问题就可以得到解决.
分享到：
相关推荐
在网页开发中，DOM（Document Object Model）操作是不可或缺的一部分，`innerHTML` 和 `innerText` 是两个常用的属性，用于处理HTML元素的内容。了解它们的用法和区别对于编写兼容性的JavaScript代码至关重要。 `...
本篇文章将深入讲解如何使用文档就绪函数以及`innerHTML`和`innerText`属性来实现动态内容的更新。 首先，我们要了解什么是文档就绪函数。在JavaScript中，通常使用`window.onload`或jQuery的`$(document).ready()`...
1. **innerHTML的基本用法**：如何通过`innerHTML`读取和修改元素的内容。例如，`element.innerHTML`返回元素的HTML，而`element.innerHTML = someHTMLString`则将元素内容替换为指定的HTML字符串。 2. **性能影响*...
这个属性可以用来改变HTML文档元素内部的HTML标记和内容，实现动态的网页内容更新，使得网页与用户的交互变得更加丰富和实时。 ### innerHTML的基本概念 每个HTML元素都有一个`innerHTML`属性，它包含了该元素内部...
`TestOutput`函数分别使用`innerText`和`innerHTML`属性获取了元素的文本和HTML内容，并通过`alert`弹出。`EditInnerText`和`EditInnerHTML`函数分别展示了如何修改一个元素的文本和HTML内容。例如，`EditInnerText`...
在JavaScript中，`innerHTML`, `outerHTML`, `innerText`, 和 `outerText` 是四个非常重要的属性，用于操作HTML元素的内容。下面将详细解释这些属性的用法和它们之间的区别。 1. **innerHTML** - `innerHTML` 属性...
通过了解innerText和innerHTML的用法和注意事项，开发者可以更加灵活地操控网页元素，实现丰富的交互效果和动态更新。在实际开发中，应根据具体需求选择合适的属性，并充分考虑浏览器兼容性和安全性问题。
本篇文章将深入探讨如何使用JavaScript来动态修改网页元素内容的方法。 首先，JavaScript提供了多种方法来选择页面上的元素。最常用的方法包括通过元素的ID、类名、标签名或使用CSS选择器。一旦选择了元素，就可以...
在本案例中，我们要讨论的是如何使用SHDocVw的WebBrowser控件来获取网页内容时去除空格。SHDocVw是Microsoft提供的一个组件，它允许我们在桌面应用中嵌入Internet Explorer引擎，以便于浏览和操作网页。 标题...
这个问题通常发生在动态生成或修改HTML内容时，例如在上述例子中，当用户点击按钮改变按钮状态（上线/下线）时，`onclick`事件应该被触发，但因为使用了`innerHTML`，导致事件失效。 为了解决这个问题，我们需要...
同时，结合DOM操作（Document Object Model），如`document.getElementById`或`document.querySelector`选择元素，`innerHTML`或`innerText`改变元素内容，可以动态地改变网页上的显示。 考虑到“JS特效”这一标签...
在内容动态改变的层特效部分，教案提出了两种方法。第一种方法适用于内容较少的情况，直接使用`innerHTML`设置HTML代码。第二种方法适用于内容较多且相对固定的情况，预先创建好包含不同内容的`div`，然后通过更改...
总的来说，DOM解析器是网页动态交互和自动化测试的重要工具，通过理解并运用DOM解析器，开发者可以实现对网页内容的灵活控制，提升工作效率，优化用户体验。在实际工作中，熟练掌握DOM操作技巧是每个前端开发者必备...
例如，`getElementById`、`getElementsByClassName`和`getElementsByTagName`用于查找元素，`innerHTML`和`innerText`用于改变元素内容，`.style`属性用于更改元素样式，而`.src`、`.alt`等属性用于更改元素属性。...
例如，使用`getElementById`、`querySelector`、`querySelectorAll`等方法来选择元素，`innerHTML`和`innerText`属性来改变元素内容。 四、事件处理 JavaScript通过事件监听器来响应用户或浏览器行为，如点击按钮、...
`document.getElementById`、`querySelector`、`querySelectorAll`等方法用于查找元素，`innerHTML`、`innerText`属性用于读写元素内容，`appendChild`、`removeChild`用于添加和删除元素。 2. 事件监听：...
这个例子可以帮助你掌握如何动态改变元素的样式或内容，以响应用户的交互。 **二、当前事件倒计时（demo2）** 倒计时功能通常用于创建定时提醒、活动开始倒计时等。在JavaScript中，可以使用`setInterval`函数每隔...