jQuery操作元素追加内容示例
编程学习 2021-07-04 15:02www.dzhlxh.cn编程入门
这篇文章主要介绍了jQuery操作元素追加内容,结合完整实例形式分析了jquery页面元素追加相关操作方法,包括append、appendTo、prepend、prependTo等方法使用技巧,需要的朋友可以参考下
本文实例讲述了jQuery操作元素追加内容。分享给大家供大家参考，具体如下：
<html>
<head>
<title>jQuery操作文档结构</title>
<meta charset="UTF-8"/>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
//内部的操作
function testAppend(){
//获取需要操作的对象
var showdiv=$("#showdiv");
//进行添加操作，指定内容的追加
showdiv.append("<b>赛高</b>"); //在对象内部的后面添加指定的内容，其是html可解析的内容，和html不同的是：html重新赋值（覆盖）这个在内容后面追加
}
function testAppend2(){
//获取需要操作的对象
var u2=$("#u2");
//进行添加操作，指定内容的追加
// u2.appendTo("#show01"); //在对象的内部后面添加利用选择器选择的对象内容,把前面的对象移动到后面的对象的内部后面(一个剪切复制操作)
$("#u2").appendTo(show01);
}
function testprepend(){
//获取需要操作的对象
var showdiv=$("#showdiv");
//进行添加操作，指定内容的追加
showdiv.prepend("<i>境界的彼方</i>"); //在对象的内部前面添加内容
}
function testprependTo(){
//获取需要操作的对象
var showdiv=$("#showdiv");
//进行添加操作，指定内容的追加
$("#u2").prependTo(showdiv); //在对象的内部前面添加选择器的对象(移动到)
// showdiv.prependTo("#u2");
}
//外部插入
function testAfter1(){
//获取需要操作的对象
var showdiv=$("#showdiv");
//进行添加操作，指定内容的追加
showdiv.after("<b>もちろん</b>"); //在对象的外部的后面添加内容
}
function testAfter2(){
//获取需要操作的对象
var showdiv=$("#showdiv");
//进行添加操作，指定内容的追加
$("#u2").insertAfter(showdiv); //在对象的外部的后面添加选择器的对象(移动到)
// showdiv.prependTo("#u2");
}
function testBefore1(){
//获取需要操作的对象
var showdiv=$("#showdiv");
//进行添加操作，指定内容的追加
showdiv.before("<b>もちろん</b>"); //在对象的外部的前面添加内容
}
function testBefore2(){
//获取需要操作的对象
var showdiv=$("#showdiv");
//进行添加操作，指定内容的追加
$("#u2").insertBefore(showdiv); //在对象的内部前面添加选择器的对象
// showdiv.prependTo("#u2");
}
</script>
<style type="text/css">
#showdiv{
width: 300px;
height: 300px;
border: solid 1px;
}
#show01{
width: 300px;
height: 300px;
border: solid 1px;
}
</style>
</head>
<body>
<h3>jQuery操作文档结构</h3>
<h4>内部操作</h4>
<input type="button" name="" id="" value="测试追加内容--append" onclick="testAppend()"/>
<input type="button" name="" id="" value="测试移动内容--appendTo" onclick="testAppend2()"/>
<input type="button" name="" id="" value="测试追加内容--prepend" onclick="testprepend()"/>
<input type="button" name="" id="" value="测试移动内容--prependTo" onclick="testprependTo()"/>
<hr />
<h4></h4>
<input type="button" name="" id="" value="测试追加内容--after" onclick="testAfter1()"/>
<input type="button" name="" id="" value="测试移动内容--after" onclick="testAfter2()"/>
<input type="button" name="" id="" value="测试追加内容--before" onclick="testBefore1()"/>
<input type="button" name="" id="" value="测试移动内容--before" onclick="testBefore2()"/>
<hr />
<div id="showdiv">
<i>Clannad</i>
</div><br /><br />
<div id="show01">
<!--<u>Clannad After Story</u>-->
</div>
<span id="u2"><u>Clannad After Story</u></span>
<hr />
</body>
</html>
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：测试上述代码运行效果。
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《》、《》、《》、《》及《》
希望本文所述对大家jQuery程序设计有所帮助。
上一篇：jQuery操作事件完整实例分析
下一篇：基于JS判断对象是否是数组