JavaScript 替換HTML字符串

■知識(shí)點(diǎn)

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

■實(shí)例設(shè)計(jì)

    下面的示例演不了 outerHTML與innerHTML屬性的不同效果。分別為列表結(jié)構(gòu)中不同列表項(xiàng)定義—個(gè)鼠標(biāo)單擊事件，在事件處理函數(shù)中分別使用outerHTML和innerHTML屬性改變原列表項(xiàng)的HTML標(biāo)記，同時(shí)會(huì)發(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)的所有列表項(xiàng)

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

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

}

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

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

}

</script>