insertAdajcentHTML
添加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
版权所有: 本文系米扑博客原创、转载、摘录,或修订后发表,最后更新于 2010-08-20 22:08:43
侵权处理: 本个人博客,不盈利,若侵犯了您的作品权,请联系博主删除,莫恶意,索钱财,感谢!