/******************************************************
*向内部添加函数
*
*append(),prepend(),appendTo(),prependTo()是在元素内部进行操作的.
*append()和appendTo()的区别,
* append()语法是:$(selector).append(contend),appendTo语法是:$(content).appendTo(selector);
* appendTo(),是将一个元素添加到selector中,而append()添加的可以是字符串,也可以是其他
*prepend()和prependTo()同上.
*
*
* append()向每个匹配的元素内部追加内容" /><br />
* prepend()向每个匹配的元素内部前置内容" /><br />
* appendTo()把所有匹配的元素追加到另一个指定元素的集合中." />
* 语法格式如下:$(contend).appendTo(selector);
* prependTo()把所有匹配的元素前置到另一个指定的元素集合中." /><br />
* 语法格式如下:$(contend).prependTo(selector);
*
*****************************************************/
-------------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------------
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>内容添加</title>
<script type="application/javascript" src="jquery-1.4.1.min.js"></script>
<script type="application/javascript" language="javascript">
/******************************************************
*向内部添加函数
*
*append(),prepend(),appendTo(),prependTo()是在元素内部进行操作的.
*append()和appendTo()的区别,
* append()语法是:$(selector).append(contend),appendTo语法是:$(content).appendTo(selector);
* appendTo(),是将一个元素添加到selector中,而append()添加的可以是字符串,也可以是其他
*prepend()和prependTo()同上.
*
*
* append()向每个匹配的元素内部追加内容" /><br />
* prepend()向每个匹配的元素内部前置内容" /><br />
* appendTo()把所有匹配的元素追加到另一个指定元素的集合中." />
* 语法格式如下:$(contend).appendTo(selector);
* prependTo()把所有匹配的元素前置到另一个指定的元素集合中." /><br />
* 语法格式如下:$(contend).prependTo(selector);
*
*****************************************************/
$(function(){
$("#button1").click(function(){
var content = $("#text1").val();
$("font").append(content);
});
$("#button2").click(function(){
var content = $("#text1").val();
$("font").prepend(content);
});
//注意$("<text>"+content+"</text>")里的<text>不可少,因为加上<text>代表是一个元素
$("#button3").click(function(){
var content = $("#text1").val();
var content1 = $("#text1");
$("<text>"+content+"</text>").appendTo("font");
});
$("#button4").click(function(){
var content = $("#text1").val();
$("<text>"+content+"</text>").prependTo("font");
});
})
</script>
</head>
<body>
<div style="width:500px;">
<center>
content:<input type="text" id="text1" /><br />
<input type="button" id="button1" value="使用append()向每个匹配的元素内部追加内容" /><br />
<input type="button" id="button2" value="使用prepend()向每个匹配的元素内部前置内容" /><br />
<input type="button" id="button3" value="使用appendTo()把所有匹配的元素追加到另一个指定元素的集合中." /><br />
<input type="button" id="button4" value="使用prependTo()把所有匹配的元素前置到另一个指定的元素集合中." /><br />
<div id="div1" style="border:1 solid #999; background-color:#06F; width:400px; height:200px">
<p><font color="#FF0000" >这里的结构是:div/p/font的形式1</font></p>
<p><font color="#FF0000" >这里的结构是:div/p/font的形式2</font></p>
<p><font color="#FF0000" >这里的结构是:div/p/font的形式3</font></p>
<p><font color="#FF0000" >这里的结构是:div/p/font的形式4</font></p>
</div>
</center>
</div>
</body>
</html>
