DOM对象的innerHTML与outerHTML比较

<html> <head> <title>Demo</title> <mce:style><!-- body {font-family:"宋体";color="blue";font-size="9pt"} --></mce:style><style mce_bogus="1"> body {font-family:"宋体";color="blue";font-size="9pt"}</style> <mce:script language="JavaScript"><!-- //.innerHTML function innerHTMLDemo() { test_id1.innerHTML="<i><u><a href="http://www.yanhaixinxi.com" mce_href="http://www.yanhaixinxi.com">沿海信息港</a></u></i>"; } //.innerText function innerTextDemo() { test_id2.innerText="<i><u><a href="http://www.yanhaixinxi.com" mce_href="http://www.yanhaixinxi.com">沿海信息港</a></u></i>"; } //.outerHTML function outerHTMLDemo() { test_id3.outerHTML="<i><u><a href="http://www.yanhaixinxi.com" mce_href="http://www.yanhaixinxi.com">沿海信息港</a></u></i>"; }    //.outerText function outerTextDemo() { test_id4.outerText="<i><u><a href="http://www.yanhaixinxi.com" mce_href="http://www.yanhaixinxi.com">沿海信息港</a></u></i>"; } // --></mce:script> </head> <body> <ul> <li id="test_id1" onclick="innerHTMLDemo()">innerHTML效果.</li> <li id="test_id2" onclick="innerTextDemo()">innerText效果.</li> <li id="test_id3" onclick="outerHTMLDemo()">outerHTML效果.</li> <li id="test_id4" onclick="outerTextDemo()">outerText效果.</li> </ul> </body> </html>

<html>
<head>
<title>Demo</title>
<style><!-- body {font-family:"宋体";color="blue";font-size="9pt"} --> </style>
<script language="JavaScript">
//.innerHTML
function innerHTMLDemo()
{
test_id1.innerHTML="<i><u><a href='http://www.yanhaixinxi.com'>沿海信息港</a></u></i>";
}
//.innerText
function innerTextDemo()
{
test_id2.innerText="<i><u><a href='http://www.yanhaixinxi.com'>沿海信息港</a></u></i>";
}
//.outerHTML
function outerHTMLDemo()
{
test_id3.outerHTML="<i><u><a href='http://www.yanhaixinxi.com'>沿海信息港</a></u></i>";
}   
//.outerText
function outerTextDemo()
{
test_id4.outerText="<i><u><a href='http://www.yanhaixinxi.com'>沿海信息港</a></u></i>";
}
</script>
</head>
<body>
<ul>
<li id="test_id1" onclick="innerHTMLDemo()">innerHTML效果.</li>
<li id="test_id2" onclick="innerTextDemo()">innerText效果.</li>
<li id="test_id3" onclick="outerHTMLDemo()">outerHTML效果.</li>
<li id="test_id4" onclick="outerTextDemo()">outerText效果.</li>
</ul>
</body>
</html>

你可能感兴趣的:(DOM对象的innerHTML与outerHTML比较)