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

最新推荐文章于 2022-10-29 23:41:22 发布

xiongzhengxiang

最新推荐文章于 2022-10-29 23:41:22 发布

阅读量559

点赞数

文章标签： javascript object html 文档 string

添加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>   

xiongzhengxiang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
有关javascript:insertAdjacentHTML和javascript:insertAdjacentElement的用法

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

扫一扫