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 
 3      < head >
 4 
 5       < script  language ="javascript" >
 6 
 7          function  myfun()
 8 
 9           {
10 
11                var  obj  =  document.getElementById( " btn1 " );
12 
13                obj.insertAdjacentHTML( " afterEnd " , " <br><input name=\ " txt1\ " > " );
14 
15           }
16 
17         </ script >
18 
19      </ head >
20 
21      < body >
22 
23        < input  name ="txt" >
24 
25        < input  id ="btn1"  name ="btn1"  type ="button"  value ="更多..."  onclick ="myfun()" >
26 
27      </ body >
28 
29  </ html >
30 
31  ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
32 
33  < head >
34  < title > 24.htm insertAdjacentHTML插入新内容 </ title >
35  < script  language ="jscript" >
36  function  addsome()
37  {
38  document.all.paral.insertAdjacentHTML( " afterBegin " , " <h1>在文本前容器内插入内容</h1> " );
39  document.all.paral.insertAdjacentHTML( " beforeEnd " , " <h2>在文本后容器内插入内容</h2> " );
40  document.all.paral.insertAdjacentHTML( " beforeBegin " , " <h4>在文本前容器外插入内容</h1> " );
41  document.all.paral.insertAdjacentHTML( " afterEnd " , " <h5>在文本后容器外插入内容</h2> " );
42  }
43  </ script >
44  </ head >
45  < body  onload ="addsome()" >
46  < div  id ="paral"  style ="fontsize:6;color='#ff00ff'" > 原来的内容 </ div >< hr >
47  </ body >
48  </ html >
49 
50  ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
51  <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
52  < HTML >
53  < HEAD >
54  < TITLE >  New Document  </ TITLE >
55  < META  NAME ="Generator"  CONTENT ="EditPlus" >
56  < META  NAME ="Author"  CONTENT ="" >
57  < META  NAME ="Keywords"  CONTENT ="" >
58  < META  NAME ="Description"  CONTENT ="" >
59  </ HEAD >
60  < BODY >
61  < script >
62  var  num = 0 ;
63  var  No_sys = 0 ;
64  function  Add_button(){
65  if (No_sys < 8 ){
66     c_input.insertAdjacentHTML( " beforeEnd " , " <div id=\ " bar " +num+ " \ "  
67 
68  οncοntextmenu=\ " Remove_button(bar " +num+ " ); return     false \ "  
69 
70  style=\ " background:red;width: 40 ;height: 20 \ " > " + num + " </div> " );
71     num ++ ;
72     No_sys ++ ;
73  }
74  }
75 
76  function  Remove_button(obj){
77  obj.removeNode( true );
78  No_sys -- ;
79  }
80  </ script >
81  < input  type ="button"  onclick ="Add_button()"  value ="动态加" >
82  < input  type ="button"  onclick ="alert(c_input.innerHTML)"  value ="看" >
83  < div  id ="c_input" >
84  </ div >   
85  </ BODY >
86  </ HTML >
87 

 

 

转载于:https://www.cnblogs.com/hkingh/articles/1638177.html