innerHTML和innerText的用法（动态改变网页内容） (转帖)

XaverSun

2015-03-17

innerHTML和innerText的用法（动态改变网页内容）

博客分类：

CSS/HTML

JavaScriptHTML脚本

最近在学习JavaScript，觉得innerHTML和innerText太有用了，利用它们，我们可以试自己的网页实现动态化。不过在使用的过程中，千万要注意它们的大小写，因为错一点您就得不到预期的效果了。这是全新的方法，当您掌握它以后将可随心所欲的设计动态内容了，不可错过哦！

一:动态改变文本和Html

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>

<!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>"。

二:文本的动态输入与输出

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>
<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>

<!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代码补充完整,这点可以说是神奇,例如下面的这段脚本

Javascript代码 innerHTML和innerText的用法（动态改变网页内容） (转帖)

function Get()
{
document.getElementById("tab").innerHTML="<table><tr>";
alert(document.getElementById("tab").innerHTML);
}

function Get()
{
   document.getElementById("tab").innerHTML="<table><tr>";
   alert(document.getElementById("tab").innerHTML);
}

运行的效果竟然是这样的:
<TABLE><TBODY><TR></TR></TBODY></TABLE>
所以请各位在使用时一定要小心.
例如在做这样的操作时就会出错.
运行的效果竟然是这样的:

Javascript代码 innerHTML和innerText的用法（动态改变网页内容） (转帖)

list.innerHTML="<table><tr>";
list.innerHTML+="<td>"
............

list.innerHTML="<table><tr>";

list.innerHTML+="<td>"

............

必须用一个中间变量

Javascript代码 innerHTML和innerText的用法（动态改变网页内容） (转帖)

var html="<table><tr>";
html+="<td>";
.........
list.innerHTML=html;

var html="<table><tr>";

html+="<td>";

.........

list.innerHTML=html;

这样问题就可以得到解决.

innerhtml

安科网

innerHTML和innerText的用法（动态改变网页内容） (转帖)

XaverSun

XaverSun

相关推荐

JS的dom获取innerHtml和innerText的区别

在JavaScript中使用innerHTML的缺点是什么？

innerHTML和innerText的用法（动态改变网页内容） (转帖)

【转】JavaScript在IE下设置innerHTML时出现\"未知的运行时错误\"

用原生 JS 实现 innerHTML 功能实例详解

JQuery填坑系列（一）：JQuery对象与DOM对象innerHTML属性

【速记】React解决IE浏览器svg标签不支持innerHTML操作的问题及相关拓展知识

【转】JavaScript在IE下设置innerHTML时出现"未知的运行时错误"

innerhtml outhtml innerText outText 区别

javascript innerHTML、outerHTML、innerText、outerText的区别

jQuery EasyUI Datagrid性能优化专题

IE6-IE9中tbody的innerHTML不能赋值bug

innerHTML插入<style>元素

innerHTML、innerText和outerHTML、outerText的区别

innerHtml和innerText

innerHTMl和确认提示的使用

高效http页面优化法则【JS对DOM的操作】

Angular中innerHTML标签的样式不起作用的原因解析

js中innerHTML、outHTML和innerText的用法与区别

前端性能优化：DocumentFragments或innerHTML取代复杂的元素注入

XaverSun