insertAdjacentHTML动态插入行

最新推荐文章于 2024-02-22 14:47:14 发布

zerolwp

最新推荐文章于 2024-02-22 14:47:14 发布

阅读量380

点赞数

分类专栏： javascript 文章标签： button html generator javascript html5 input

javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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