用innerHTML向DIV元素输出内容，怎么标签显示出来了？

浏览器：IE7向<div id="article2"></div>元素写内容，使用下面的句子：var lastWord = "abc";
var article2 = document.getElementById("article2");
article2.innerHTML += "<label id=\"";
article2.innerHTML += lastWord;
article2.innerHTML  += "\">";
article2.innerHTML  += lastWord;
article2.innerHTML  += "</label>";
article2.innerHTML  += " ";问题1 ：结果在浏览器中显示的是<label id="abc">abc</label> ，而不是abc。为什么标签本身也会被显示呢？问题2 ：如果我不用字符实体代替<，比如说在上边的句子中把“"<”改写成'<'，则绿颜色的句子就像不存在一样，会被浏览器略掉，导致显示效果成为“abc">abc”。这又是为什么，难道IE7只识别'>'而不是识别'<'？望高手解答。

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

article2.innerHTML="<label........你的代码"
你把要加到层中的字符串先处理好，然后再赋值试一下。
article2.innerHTML += <label id=\"";
article2.innerHTML += lastWord;
article2.innerHTML += "\">";
article2.innerHTML += lastWord;
article2.innerHTML += </label>";
var str = "<label id=\"";
str += lastWord;
str += "\">";
str += lastWord;
str += "</label>";
str += " ";

article2.innerHTML = str;你是说这样吗，我试过了，不行。
我直接贴代码吗，你们帮忙看看<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>从英文中学习生单词</title><style type="text/css">body
{
/*width:1000px;*/
margin:0px;
padding:0px;
text-align:center;
}#banner
{
width:800px;
height:50px;
margin:0px;
padding-top:10px;
text-align:center;}#button
{
/*width:800px;
height:50px;*/
margin:0px;
padding-top:20px;
}#add
{
position:relative;
left:-40px;
}#edit
{
position:relative;
left:5px;
}#save
{
position:relative;
left:50px;
}#context
{
width:760px;
/*height:300px;*/
}#article1
{
width:760px;
height:300px;
white-space:normal;
}#label1,#label2,#article1,#article2,#strange-words
{
text-align:left;
}
</style><script type="text/javascript">//说明文本是不是已经处理过
var isSet = false;function onAdd()
{
if( isSet == true)
return; //取出编辑框中的文本
var article1 = document.getElementById("article1");
var text = article1.value;

//去掉多余的空格,注意replace函数中正则表达式的写法
var text = text.replace(/\s{2,}/g," ") //将整理后的文本显示到DIV控件中
var article2 = document.getElementById("article2");

//分词，得到单词数组
var wordArray = text.split(' ');
for(var i=0; i<wordArray.length; i++ )
{
var lastWord = "";//此变量保存组成单词的字符
var lastFlag;
var CurrentFlag; var word = wordArray[i];

//判断第一个字符是什么类型
var letter = word.charAt(0);
if(letter.match(/[a-zA-Z0-9-]/) == null)//如果不是单词字符
{
lastFlag = false;
}
else
{
lastFlag = true;
}
lastWord = letter;
//判断剩下的字符
for(var j=1; j<word.length; j++)
{
var letter = word.charAt(j);
if(letter.match(/[a-zA-Z0-9-]/) == null)
CurrentFlag = false;
else
CurrentFlag = true;

if(CurrentFlag == lastFlag)
{
lastWord += letter;
}
else
{
if(lastFlag == false)
{
article2.innerHTML += lastWord;
}
else
{
/*
article2.innerHTML  += "<label id=\"";
article2.innerHTML  += lastWord;
article2.innerHTML  += "\">";
article2.innerHTML  += lastWord;
article2.innerHTML  += "</label>";
*/

}

lastWord = letter;
lastFlag = CurrentFlag;
}
}

//输出最后一个字符串
if(lastFlag == false)
{
article2.innerHTML += lastWord;
article2.innerHTML  += " ";
}
else
{

article2.innerHTML += "<label id=\"";
article2.innerHTML += lastWord;
article2.innerHTML += "\">";
article2.innerHTML += lastWord;
article2.innerHTML += "</label>"; /*
//alert(article2.innerHTML);
var str = "<label id=\"";
str += lastWord;
str += "\">";
str += lastWord;
str += "</label>";
str += " ";
*//* article2.innerHTML = str; article2.innerHTML += "<label id=\""; //alert(article2.innerHTML); article2.innerHTML += lastWord;
//alert(article2.innerHTML); article2.innerHTML  += "\">";

article2.innerHTML  += lastWord;
//alert(article2.innerHTML); article2.innerHTML  += "</label>";
//alert(article2.innerHTML); article2.innerHTML  += " ";
*/
}
}

//控件控件的显示和隐藏
article1.style.display = "none";
article2.style.display = "block";

isSet = true;}
function onEdit()
{
}
function onSave()
{
}
function onload2()
{
document.getElementById("article1").style.display = "block";
document.getElementById("article2").style.display = "none";
}function onClicked(id)
{
alert(id);
}</script></head><body onload="onload2();"><div id="banner"><img  alt="添加文本" src="#" ></div><div id="context"><div id="label1">原文:</div>
<textarea id="article1"></textarea><div id="article2">
</div><div id="label2">生单词表:</div>
<div id="strange-words"></div></div><div id="button">
<img  id="add"  alt="添加文本" src="#" onclick="onAdd();">
<img  id="edit" alt="新建文本" src="#" >
<img  id="save" alt="保存文章" src="#" ></div></body></html>
没必要弄得这么麻烦吧
如用“"<”代替'<'，没必要
之所以出现LZ所说的原因，其实是完全是因为字符串拼写错误的原因，注意几点"、'、\"、\'间的关系和套接，就不会出问题
另外，最好innerHTML的内容拼好了之后，再一次性赋给innerHTML属性下面的示例测试通过<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>无标题页</title>
</head>
<body>
    <div id="article2"></div>
    <input type="button" value="change" onclick="changeDiv();" />
</body>
</html><script type="text/javascript">
    function changeDiv(){
        var innerHtml="<label id='abc'>abc</label>";
        document.getElementById("article2").innerHTML= innerHtml;
    };
</script>
两层字符套接，用"和'就可区分，如果是后台cs中向前台注册innerHTML的脚本，可能涉及三层字符套接，就需要用到"和'以及\"
问题1：
   innerHTML对>、<、"等转义字符，只有在前台显示的时候才会转义。
问题2：
   对IE来说，innerHTML会自动检验赋值语句的正确性，article2.innerHTML += "<label id=\""; 对于这一句因为不是完整的<label ></label >，ie的innerHTML则会自动的屏蔽这句话。
  对FF来说，article2.innerHTML += "<label id=\"";会自动的添加后缀标签。
补充刚才的：
如果article2.innerHTML +="<label id=\""+lastWord+"\">"+lastWord+"</label>"一句话完成就innerHTML的赋值就会没问题