您的位置：首页 > Web前端 > HTML

insertAdjacentHTML动态插入行

2010-09-02 16:46 316 查看

insertAdjacentHTML动态插入行

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 oncontextmenu=/"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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航