insertAdjacentHTML方法示例
添加HTML内容与文本内容以前用的是innerHTML与innerText方法，最近发现还有insertAdjacentHTML和insertAdjacentText方法，这两个方法更灵活，可以在指定的地方插入html内容和文本内容。insertAdjacentHTML方法：在指定的地方插入html标签语句原型：insertAdajcentHTML(swhere,stext)参数：swhere: 指定插入html标签语句的地方，有四种值可用：1. beforeBegin: 插入到标签开始前2. afterBegin:插入到标签开始标记之后3. beforeEnd:插入到标签结束标记前4. afterEnd:插入到标签结束标记后stext：要插入的内容 1 <html> 2 <head> 3 <script language="javascript"> 4 function myfun(){ 5 var obj = document.getElementById("btn1"); 6 obj.insertAdjacentHTML("afterEnd","<br><input name="txt1">"); 7 } 8 </script> 9 </head>10 <body>11 <input name="txt">12 <input id="btn1" name="btn1" type="button" value="更多" >13 </body>14 </html>************************************************************************************ 1 <html> 2 <head> 3 <title>24.htm insertAdjacentHTML插入新内容</title> 4 <script language="jscript"> 5 function addsome() 6 { 7 document.all.paral.insertAdjacentHTML("afterBegin","<h1>在文本前容器内插入内容</h1>"); 8 document.all.paral.insertAdjacentHTML("beforeEnd","<h2>在文本后容器内插入内容</h2>"); 9 document.all.paral.insertAdjacentHTML("beforeBegin","<h4>在文本前容器外插入内容</h1>");10 document.all.paral.insertAdjacentHTML("afterEnd","<h5>在文本后容器外插入内容</h2>");11 }12 </script>13 </head>14 <body >15 <div id="paral" style="fontsize:6;color='#ff00ff'">原来的内容</div><hr>16 </body>17 </html> ********************************************************************************** 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2 <HTML> 3 <HEAD> 4 <TITLE> New Document </TITLE> 5 <META NAME="Generator" CONTENT="EditPlus"> 6 <META NAME="Author" CONTENT=""> 7 <META NAME="Keywords" CONTENT=""> 8 <META NAME="Description" CONTENT=""> 9 </HEAD>10 <BODY>11 <script>12 var num=0;13 var No_sys=0;14 function Add_button(){15 if(No_sys<8){16 c_input.insertAdjacentHTML("beforeEnd","<div id="bar"+num+"" oncontextmenu="Remove_button(bar"+num+");return false" style="background:red;width:40;height:20">"+num+"</div>");17 num++;18 No_sys++;19 }20 }21 function Remove_button(obj){22 obj.removeNode(true);23 No_sys--;24 }25 </script>26 <input type="button"value="动态加">27 <input type="button"value="看">28 <div id="c_input">29 </div>30 </BODY>31 </HTML>
页:
[1]