JavaScript 替換HTML字符串

■知識點

    outerHTML也是IE的私有屬性，后來被HTML5規(guī)范，與innerHTML的功能相同，但是它會包含元素自身。瀏覽器支持狀態(tài)：IE4+、Firefox 8+、Safari 4+、Chrome 和Opera 8+。

■實例設(shè)計

    下面的示例演不了 outerHTML與innerHTML屬性的不同效果。分別為列表結(jié)構(gòu)中不同列表項定義—個鼠標(biāo)單擊事件，在事件處理函數(shù)中分別使用outerHTML和innerHTML屬性改變原列表項的HTML標(biāo)記，同時會發(fā)現(xiàn)outerHTML是使用<h2>替換<li>，而innerHTML是把<h2>插入到<li>中。

<hl >單擊回答問題</h 1 >

<ul>

    <li>你叫什么？ </li>

    <li>你喜歡JS嗎？ </li>

</ul>

<script>

var ul = document.getElementsByTagName("ul")[0];    //獲取列表結(jié)構(gòu)

var lis = ul.getElementsByTagName("li");            //獲取列表結(jié)構(gòu)的所有列表項

lis[0].onclick = function(){                        //為第2個列表項綁定事件處理函數(shù)

    this.innerHTML = "<h2>我是一名初學(xué)者</h2>";     //替換HTML文本

}

lis[1].onclick = function(){                        //為第4個列表項綁定事件處理函數(shù)

    this.outerHTML = "<h2>當(dāng)然喜歡</h2>";           //覆蓋列表項標(biāo)簽及其包含內(nèi)容

}

</script>