如果要在页面中增加某个元素,只需要找到元素的上级节点,通过函数$(html)完成元素的创建后,增加到该节点中
语法如下:
$(html)
其中html表示用于动态创建DOM元素的HTML标记字符串
例如:
var $div =
$("<div title='jQuery理念'>Creat
ChildNodes</div>");
$("body").append($div);
意思是创建一个节点字符串"<div
title='jQuery理念'>Creat
ChildNodes</div>",然后插入到匹配元素<body>即页面中
①append(content)向每个匹配的元素内部追加内容。这个操作与对指定的元素执行a方法,将它们添加到文档中的情况类似。content要追加到目标中的内容
向所有段落中追加一些HTML标记。
HTML 代码:<p>I would
like to say: </p>
jQuery 代码:$("p").append("<b>Hello</b>");
结果:[ <p>I
would like to say:
<b>Hello</b></p>
]表示在<元素中插入一个<b>元素并最佳到<p>元素中内容的末尾
②append(function(index,
html))向每个匹配的元素内部追加内容。返回一个HTML字符串,用于追加到每一个匹配元素的里边。接受两个参数,index参数为对象在这个集合中的索引值,html参数为这个对象原先的html值。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>动态插入节点方法</title>
<script
type="text/javascript"
src="Jscript/jquery-1.4.2.js">
</script>
<script
type="text/javascript"
src="Jscript/jquery-1.4.2-vsdoc.js">
</script>
<style
type="text/css">
body{font-size:13px}
</style>
<script
type="text/javascript">
$(function() {
$("div").append(retHtml); //插入内容
function
retHtml() {
var str = "
<b>Write Less Do
More</b> ";
return str;
}
})
</script>
</head>
<body>
<div>jQuery</div>
</body>
</html>
效果图:
③appendTo(content)把所匹配的元素追加到另一个指定的元素集合中,content表示要追加到的目标元素
把所有段落追加到ID值为foo的元素中
HTML 代码:<p>I would
like to say: </p>
<div></div><div></div>
jQuery 代码:$("p").appendTo("div");
结果:<div><p>I
would like to say:
</p></div>
<div><p>I
would like to say:
</p></div>
把<p>元素插入到所有的<div>元素中
此外以上的都是追加插入到匹配元素的最后面,而如果先插入到匹配元素的内部的里面是:
④prepend(content)向每个所选择的元素内部前置内容,与append意义相同,只不过是插入的位置不同,以前一后。
⑤prepend(function(index,html))向所匹配的元素内部前置function函数所返回的内容
⑥prependTo(content)把所匹配的元素前置到另一个指定的元素集合中,content表示要前置到的目标元素