jQuery操作元素追加内容示例
程序员文章站
2024-03-30 21:40:15
本文实例讲述了jquery操作元素追加内容。分享给大家供大家参考，具体如下：
jquer...</div>
<div class="content">
<p>本文实例讲述了jquery操作元素追加内容。分享给大家供大家参考，具体如下：</p>
<div class="jb51code">
<pre class="brush: javascript;">
<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>
</pre>
</div>
<p>感兴趣的朋友可以使用<span style="color: #ff6600"><strong>在线html/css/javascript代码运行工具</strong></span>：<a target="_blank" href="http://tools.jb51.net/code/htmljsrun" rel="nofollow">http://tools.jb51.net/code/htmljsrun</a>测试上述代码运行效果。</p> </div>
<div class="info-pre-next">
<p>
上一篇： <a href="/article/2601855.html">
设计模式之装饰者模式（一） </a>
</p>
<p>
下一篇： <a href="/article/2601857.html">
程序员脱发？看看各个创始人的发量？ </a>
</p>
</div>
<div class="wz_tuijian">
<p>
推荐阅读 </p>
<ul>
<li>
<a href="/article/2601856.html" target="_blank" title="jQuery操作元素追加内容示例">
<h2>
jQuery操作元素追加内容示例 </h2>
</a>
</li>
<li>
<a href="/article/2574797.html" target="_blank" title="如何用jquery获取网页中的文字或者对象
博客分类： jquery 获取元素 jquery 元素 dom操作">
<h2>
如何用jquery获取网页中的文字或者对象
博客分类： jquery 获取元素 jquery 元素 dom操作 </h2>
</a>
</li>
<li>
<a href="/article/2572376.html" target="_blank" title="Jquery cookie操作示例，写入cookie，读取cookie，删除cookie">
<h2>
Jquery cookie操作示例，写入cookie，读取cookie，删除cookie </h2>
</a>
</li>
<li>
<a href="/article/2540165.html" target="_blank" title="java实现XML增加元素操作简单示例">
<h2>
java实现XML增加元素操作简单示例 </h2>
</a>
</li>
<li>
<a href="/article/2537273.html" target="_blank" title="java实现XML增加元素操作简单示例">
<h2>
java实现XML增加元素操作简单示例 </h2>
</a>
</li>
<li>
<a href="/article/2529906.html" target="_blank" title="Python实现文件内容批量追加的方法示例">
<h2>
Python实现文件内容批量追加的方法示例 </h2>
</a>
</li>
<li>
<a href="/article/2527454.html" target="_blank" title="Python文件操作之合并文本文件内容示例代码">
<h2>
Python文件操作之合并文本文件内容示例代码 </h2>
</a>
</li>
<li>
<a href="/article/2522131.html" target="_blank" title="Python实现两个list对应元素相减操作示例">
<h2>
Python实现两个list对应元素相减操作示例 </h2>
</a>
</li>
<li>
<a href="/article/2518167.html" target="_blank" title="Python实现两个list对应元素相减操作示例">
<h2>
Python实现两个list对应元素相减操作示例 </h2>
</a>
</li>
<li>
<a href="/article/2514670.html" target="_blank" title="asp.net使用jQuery获取RadioButtonList成员选中内容和值示例">
<h2>
asp.net使用jQuery获取RadioButtonList成员选中内容和值示例 </h2>
</a>
</li>
</ul>
</div>
</article>
</div>
</main>
<footer><div class="box"><div class="ft_nav"><div class="ft_about"><p>关于网站</p><ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益，请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"><p> 备案号：<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a></p><p>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </p></div></div></div></footer> </body>
</html>