代码改变世界

insertAdjacentHTML方法示例

2010-01-27 16:24  xiaosuo  阅读(180)  评论(0编辑  收藏  举报

  添加HTML内容与文本内容以前用的是innerHTML与innerText方法,最近发现还有insertAdjacentHTML和insertAdjacentText方法,这两个方法更灵活,可以在指定的地方插入html内容和文本内容。
  insertAdjacentHTML方法:在指定的地方插入html标签语句

  原型:insertAdajcentHTML(swhere,stext)

参数:

  swhere: 指定插入html标签语句的地方,有四种值可用:

    1. beforeBegin: 插入到标签开始前

    2. afterBegin:插入到标签开始标记之后

    3. beforeEnd:插入到标签结束标记前

    4. afterEnd:插入到标签结束标记后

  stext:要插入的内容。

代码
<html>
<head>
<title>insertAdjacentHTML插入新内容</title>
<script language="jscript">
function addsome()
{
    document.all.paral.insertAdjacentHTML(
"afterBegin","<h1>在文本前容器内插入内容</h1>");
    document.all.paral.insertAdjacentHTML(
"beforeEnd","<h2>在文本后容器内插入内容</h2>");
    document.all.paral.insertAdjacentHTML(
"beforeBegin","<h4>在文本前容器外插入内容</h4>");
    document.all.paral.insertAdjacentHTML(
"afterEnd","<h5>在文本后容器外插入内容</h5>");
}
</script>
</head>
<body onload="addsome()">
<div id="paral" style="fontsize:6;color='#ff00ff'">原来的内容</div><hr>
</body>
</html>