var text='ullispan class="name"姓名/spaninput class="b1" type="text" //lilispan class="sex"性别/spanselect class="b2" name="gender"option value="1"男/optionoption value="0"女/option/select/li/ul';
网站建设哪家好,找创新互联建站!专注于网页设计、网站建设、微信开发、微信小程序定制开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了澧县免费建站欢迎大家使用!
$('.info').append(text);
需要注意的是插入的整段代码不要有换行
jQuery 添加新内容有以下四个方法:
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
下面实例演示:点击按钮则在表格数据区域增加一行
1、HTML结构
table id = "test"
thead
trth列1/thth列2/thth列3/th/tr
/thead
tbody
trtd1/tdtd1/tdtd2/td/tr
trtd2/tdtd4/tdtd5/td/tr
/tbody
/table
input type="button" id="btn1" value="在开头增加"
input type="button" id="btn2" value="在末尾增加"
2、jquery代码
$(function(){
$("#btn1").click(function() {
$("#test tbody").prepend('trtd/tdtd/tdtd/td/tr');
});
$("#btn2").click(function() {
$("#test tbody").append('trtd/tdtd/tdtd/td/tr');
});
});
3、效果演示
$('#test').childNodes[$('#test').childNodes.length - 1],此方法可向所有匹配元素的内部的尾部追加HTML内容。
特别说明:
此方法是追加内容,并不会删除之前的内容。
html内容就是内容中可以包含html标签,并且能够被浏览器渲染。
文本内容是先将内容中的html预定义字符转换成html字符实体,这样html标签就不会被渲染。
jQuery append() 方法在被选元素(内部)的结尾插入内容。
jQuery prepend() 方法在被选元素(内部)的开头插入内容。
jQuery after() 方法在被选元素的开头插入内容。
jQuery before() 方法在被选元素的开头插入内容。
例如:
1、append() ——在备选元素的内部结尾插入指定内容
2、appendTo()——方法在被选元素的内部结尾插入指定内容
这两个方法效果都是一样,只是内容的位置和选择器的位置不一样。
$(document).ready(function(){
$("#btn2").click(function(){
$("input type='text' name='ddd' id='ddd' value='Hello, Nowamagic' br").appendTo("#ccc");
});
$("#btn1").click(function(){
$("#nowamagic").append("input type='text' name='ddd' id='ddd' value='Hello, Nowamagic' br");
});
});
这里我们必须知道一点,就是 append 和 appendTo 的区别:append 单纯的内容,appendTo 要把内容传给某个元素。
这个函数的用法有很多,比如你可以按需要追加form,在区域内追加图片等等都是可以的。