jQuery操作元素追加内容示例
本文实例讲述了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代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery页面元素操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
相关推荐
-
jquery 追加元素append、prepend、before、after用法与区别分析
一.after()和before()方法的区别 after()--其方法是将方法里面的参数添加到jquery对象后面去: 如:A.after(B)的意思是将B放到A后面去: before()--其方法是将方法里面的参数添加到jquery对象前面去. 如:A.before(B)的意思是将A放到B前面去: 二.insertAfter()和insertBefore()的方法的区别 其实是将元素对调位置: 可以是页面上已有元素:也可以是动态添加进来的元素.
-
jquery 操作日期、星期、元素的追加的实现代码
复制代码 代码如下: <script language="javascript" > $(document).ready(function(){ function show(){ var mydate=new Date(); var str = "" + mydate.getFullYear() + "年"; str += (mydate.getMonth() + 1) + "月"; str += mydate.g
-
jQuery为DOM动态追加事件的方法
处理一个列表绑定,因为是一个展示项目,没有使用复杂的插件,直接jsrender写了个模板,但是后面有一个操作按钮,去查看数据详情,想到了jquery使用on进行事件委托,然后就开搞 最初是这样写的: $(".btn-open").on("click", function () { alert($(this).text()); }) 当然这样是不起作用的,因为在document reday后,.btn-open 这个元素根本还不存在呢,列表没绑定,事件当然也帮不上的!
-
JQuery实现样式设置、追加、移除与切换的方法
本文实例讲述了JQuery实现样式设置.追加.移除与切换的方法.分享给大家供大家参考.具体分析如下: 有了JQuery,元素的样式操作会变得相当简易.下面我们来看看如何使用JQuery来实现元素样式的获取.设置.追加.删除以及其它一些操作. 获取与设置样式 获取class和设置class都可以使用attr()方法来完成.例如使用attr()方法来获取p元素的class,JQuery代码如下: var p_class = $("p").attr("class"); /
-
利用jquery如何从json中读取数据追加到html中
JSON 格式 json 是 Ajax 中使用频率最高的数据格式,在浏览器和服务器中之间的通讯可离不开它. JSON 格式说明 需要特别注意的是,在 JSON 中的属性名是需要使用引号引起来的. 1.下载安装jquery 可通过下面的方法引入在线版本的js: <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> 参考安装文档://www.jb51.net/zt
-
js和jquery对dom节点的操作(创建/追加)
复制代码 代码如下: <script src="jquery-1.9.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $('#Button1').click(function () { // var ha = '<p>a</p>'; // $('div').app
-
jQuery动态创建元素以及追加节点的实现方法
我们知道js中有三种动态创建元素的方法,jQuery中也可以动态的创建元素 例如: var str = $("<a href='http://www.jb51.net'>我们</a>"); $("ul").append(str); //将动态创建的str元素追加到ul下面 追加节点 在js当中追加节点的方法是appendChild(节点元素)和insertBefor(节点元素,位置),在jQuery中是 append 追加在父元素的最后一个子
-
jquery 追加tr和删除tr示例代码
复制代码 代码如下: <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> <script> $(function(){ $("#getAtr").click(function(){ $str=''; $str+="<tr align='center'>"; $str+="<td
-
jQuery 追加元素的方法如append、prepend、before
1.jQuery append() 方法 jQuery append() 方法在被选元素的结尾插入内容. 实例 $("p").append("Some appended text."); 2.jQuery prepend() 方法 jQuery prepend() 方法在被选元素的开头插入内容. 实例 $("p").prepend("Some prepended text."); 3.after() 和 before() 方法
-
jQuery实现合并/追加数组并去除重复项的方法 原创
本文实例讲述了jQuery实现合并/追加数组并去除重复项的方法.分享给大家供大家参考,具体如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>www.jb51.net jQuery不重复地追
-
Jquery元素追加和删除的实现方法
介绍 DOM是Document Object Modeule的缩写,一般来说,DOM操作分成3个方面. 1.DOM Core DOM Core并不专属于javascript,任何一种支持DOM的程序设计语言都可以使用它,用途也远不止仅限于网页,也可以用来处理任何一种使用标记语言编写出来的文档,如XML. 例如:document,getElementsByTagName("form");//使用DOM Core来获取表单对象的方法. 2.HTML-DOM 在使用Javascript和DO
-
jquery 元素控制(追加元素/追加内容)介绍及应用
一.在元素内部/外部追加元素 append,prepend:添加到子元素 before,after:作为兄弟元素添加 html: 复制代码 代码如下: <div id="content"> <p>在我的后面追加一条新闻</p> </div> Javascript: 复制代码 代码如下: <script type="text/javascript"> jQuery(function(){ //在元素内部追加内