有关javascript:insertAdjacentHTML和javascript:insertAdjacentElement的用法

最新推荐文章于 2020-06-19 14:01:57 发布

caobin518

最新推荐文章于 2020-06-19 14:01:57 发布

阅读量467

点赞数

分类专栏：杂文文章标签： javascript object html 文档 string

杂文专栏收录该内容

13 篇文章 0 订阅

订阅专栏

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

原型：insertAdajcentHTML(swhere,stext)

参数：

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

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

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

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

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

stext：要插入的内容

DEOM:

 
   view plain 
  
 <!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>   
 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />   
 <title>无标题文档</title>   
 <mce: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>在文本前容器外插入内容</h1>");   
 document.all.paral.insertAdjacentHTML("afterEnd","<h5>在文本后容器外插入内容</h2>");   
 }   
 // --></mce:script>   
 </head>   
 <body οnlοad="addsome()">   
 <div id="paral" style="fontsize:6;color='#ff00ff'" mce_style="fontsize:6;color='#ff00ff'">原来的内容</div><hr>   
 </body>   
 </html>   

insertAdjacentElement

　　语法：
　　oElement = object . insertAdjacentElement ( sWhere , oElement )
　　参数：
　　oElement :　必选项。对象(Element)。要插入到 object 邻近的对象。
　　sWhere :　必选项。字符串(String)。beforeBegin | afterBegin | beforeEnd | afterEnd beforeBegin :　将 oElement 插到 object 的开始标签之前。
　　afterBegin :　将 oElement 插到 object 的开始标签之后。但是在 object 的所有原有内容之前。
　　beforeEnd :　将 oElement 插到 object 的结束标签之前。但是在 object 的所有原有内容之后。
　　afterEnd :　将 oElement 插到 object 的结束标签之后。
　　返回值：
　　oElement :　对象(Element)。返回插入的对象的引用。
　　说明：
　　将 oElement 依据 object 定位插入文档结构。
　　当文档正在载入时，不可以尝试此方法。必须在 onload 事件触发以后。
　　假如你尝试插入一个已经在文档结构中存在定位的对象，该对象将被移动到你指定的插入位置，而不会有新对象被创建。

 
    view plain 
   
 <SCRIPT>   
 function fnAdd()   
 {   
 var oNewItem = document.createElement("LI");   
 oList.children(0).insertAdjacentElement("BeforeBegin",oNewItem);   
 oNewItem.innerText = "List Item 0";   
 }   
 </SCRIPT>   
 :   
 <BODY>   
 <OL ID = "oList">   
 <LI>List Item 1</LI>   
 <LI>List Item 2</LI>   
 <LI>List Item 3</LI>   
 </OL>   
 <INPUT TYPE = "button" VALUE = "Add Item" οnclick="fnAdd()">   
 </BODY>   