insertAdajcentHTML

长平狐 发布于 2013/01/06 11:21
阅读 85
收藏 0

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

 

转载声明: 本文转自 http://www.cnblogs.com/youliny/archive/2009/09/09/1563143.html

 

============================================================================

 

关于innerHTML和insertHTML的使用

 

好像没有insertHTML这个方法吧 我没见过。
有个类似的是insertAdajcentHTML

原型:insertAdajcentHTML(swhere,stext)

参数:

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

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

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

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

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


至于innerHTML就是某个标签的内部HTML 比如<td></td>之间的HTML
innerHTML可以通过element.innerHTML获取,也可以通过element.innerHTML=****进行某个element的innerHTML的修改

 

转载声明: 本文转自 http://zhidao.baidu.com/question/71535567.html?si=1


原文链接:http://blog.csdn.net/sunboy_2050/article/details/5827635
加载中
返回顶部
顶部