【例 1】使用 innerHTML 属性设置元素内容
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用innerHTML属性设詈div元素内容</title>
<style>
div {width:240px; height:200px; background:#f1f1f1; border:1px solid #333; padding:10px;}
</style>
<script>
window.onload = function(){
var oDiv = document.getElementById('div1');
var oSpan = document.getElementByldCspan1');
var oText = document.getElementById('text1');
var oBtn = document.getElementById('btn1.');
oBtn.onclick = function(){
if(!oText.value.match(/s*/)){ //使用正则表达式判断输入的是否为空字符
//将文本框前的 label、输入的文本、换行标签以及div原来的内容一起作为div元素的内容
oDiv.innerHTML += oSpan.innerHTML + oText.value + '<br>';
oText.value = ''; //发送信息后清空文本框
}else{
alert("请输入信息！');
}
}；
}；
</script>
</head>
<body>
<div id="div1"> </div>
<span id="span1">妙味:</span>
<input id="text1" type="text"/>
<input id="btn1" type="button" value="发送"/>
</body>
</html>
上述代码中的 if() 判断语句使用了正则表达式来判断输入的内容是否为空字符。代码中使用了 oSpan.innerHTML 和 oDiv.innerHTML 分别获取 span 元素和 div 元素的内容，然后，又通过 oDiv.innerHTML 将 span 元素和 div 元素的内容、文本框输入的内容以及换行标签一起作为 div 元素的内容来设置。
注：oDiv.innerHTML+=oSpan.innerHTML+oText.value 等效于 oDiv.innerHTML=oDiv.innerHTML+oSpan.innerHTML+oText.value。图 1 所示是在文本框中先后输入两行文本并单击发送按钮的结果。
图 1：文本框输入不为空时的结果
从例 1 中可以看到，使用 innerHTML 属性，既可以访问一个元素的 HTML 内容，同时也可以设置元素的 HTML 内容。要设置元素内容，只需要把 innerHTML 属性放到＝的左边即可，而出现在其他位置时，innerHTML 属性都是用于访问元素的内容的。
需要注意的是，例 1 中的oDiv.innerHTML+=……这种写法，在使用循环语句对某个元素实现重复多次设置相同的 HTML 内容时，如果在循环体中使用oDiv.innerHTML+=……这样的代码来设置 HTML 内容，会对运行性能造成或多或少的影响。针对这种情况，应将重复设置的 HTML 内容先赋给一个字符串变量，然后在循环体外面再用该字符串变量设置元素的 HTML 内容。
示例代码如下所示：
<script>
...
var str ='';
for(var i=0; i<2000; i++){
str += '<input type="button" value="按钮"/>';
//注意：不要使用下面的写法，否则对性能影响比较大
//oDiv.innerHTML += '<input type="button" value="按钮"/>';
}
oDiv.innerHTML += str; //在循环体外使用字符串变量设置元素内容
</script>
上述示例中之所以不能使用注释掉的那种写法，原因是，如果将代码oDiv.innerHTML+=……放到循环体中，则每次循环都要访问 oDiv 的 innerHTML 属性获取 div 的 HTML 内容，当循环次数比较大时，这样势必对运行性能有较大的影响。
原创文章，作者：奋斗，如若转载，请注明出处：https://blog.ytso.com/23975.html