insertAdjacentHTML方法示例

转自：http://www.blogjava.net/Scott/archive/2007/08/30/141449.html

添加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 ="更多"  onclick ="myfun()" >
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  onload ="addsome()" >
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"  onclick ="Add_button()"  value ="动态加" >
27  < input  type ="button"  onclick ="alert(c_input.innerHTML)"  value ="看" >
28  < div  id ="c_input" >
29  </ div >   
30  </ BODY >
31  </ HTML >

 

 

添加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 ="更多"  onclick ="myfun()" >
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  onload ="addsome()" >
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"  onclick ="Add_button()"  value ="动态加" >
27  < input  type ="button"  onclick ="alert(c_input.innerHTML)"  value ="看" >
28  < div  id ="c_input" >
29  </ div >   
30  </ BODY >
31  </ HTML >