jQuery操作元素追加内容示例
程序员文章站
2022-04-14 15:21:29
本文实例讲述了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/590111.html">
es6 for循环中let和var区别详解 </a>
</p>
<p>
下一篇： <a href="/article/590113.html">
jQuery擦除插件eraser使用方法详解 </a>
</p>
</div>
<div class="wz_tuijian">
<p>
推荐阅读 </p>
<ul>
<li>
<a href="/article/2292854.html" target="_blank" title="jquery 合并内容相同的单元格(示例代码)_jquery">
<h2>
jquery 合并内容相同的单元格(示例代码)_jquery </h2>
</a>
</li>
<li>
<a href="/article/2291314.html" target="_blank" title="Jquery搜索父元素操作方法_jquery">
<h2>
Jquery搜索父元素操作方法_jquery </h2>
</a>
</li>
<li>
<a href="/article/2282494.html" target="_blank" title="Java正则提取中括号中的内容操作示例">
<h2>
Java正则提取中括号中的内容操作示例 </h2>
</a>
</li>
<li>
<a href="/article/2270033.html" target="_blank" title="Java正则提取中括号中的内容操作示例">
<h2>
Java正则提取中括号中的内容操作示例 </h2>
</a>
</li>
<li>
<a href="/article/2269684.html" target="_blank" title="jquery如何实现在加载完iframe的内容后再进行操作">
<h2>
jquery如何实现在加载完iframe的内容后再进行操作 </h2>
</a>
</li>
<li>
<a href="/article/2251167.html" target="_blank" title="jQuery基于ajax操作json数据简单示例">
<h2>
jQuery基于ajax操作json数据简单示例 </h2>
</a>
</li>
<li>
<a href="/article/2251052.html" target="_blank" title="jQuery操作json常用方法示例">
<h2>
jQuery操作json常用方法示例 </h2>
</a>
</li>
<li>
<a href="/article/2249514.html" target="_blank" title="Python获取基金网站网页内容、使用BeautifulSoup库分析html操作示例">
<h2>
Python获取基金网站网页内容、使用BeautifulSoup库分析html操作示例 </h2>
</a>
</li>
<li>
<a href="/article/2231051.html" target="_blank" title="jQuery实现合并表格单元格中相同行操作示例">
<h2>
jQuery实现合并表格单元格中相同行操作示例 </h2>
</a>
</li>
<li>
<a href="/article/2230856.html" target="_blank" title="jQuery实现表格的增、删、改操作示例">
<h2>
jQuery实现表格的增、删、改操作示例 </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>