jQuery中动态操作元素(新增,移除,判断一个元素是否有子元素)的方法


一、jQuery中动态创建添加元素/的方法

【1】append():

$()创建元素,后用append()方法添加。append() 还可以把其他地方元素添加进这个对象中

$('#btn').click(function() {
  var el = $('<p>这是一个P标签</p>');
 
  // $('#box').append(el); //两种添加方法
  el.appendTo($('#box'));
})

【2】html():

html()方法为元素 创建并添加子元素。 html() 还可以把其他地方元素添加进这个对象中。支持添加标签。

$('#btn').click(function() {
  $('#box').html('<h>标题是。。</h>');
})

【3】DOM中创建元素方法:

var box = document.getElementById('box');
var p = document.createElement('p');
p.innerText = '这是第二个哦~';
box.appendChild(p);

【4】jQuery中添加元素的方法:

var i = 1;
$('#btn').click(function () {
  var p = $('<p> 第二个p标签' + i + '</p>')
  i++;
//一、在元素内添加,可以把其他地方元素也添加进来:对象.html('元素及内容')
  $('#box').html($('#main'));

//二、在元素内添加,依次(往后)添加:对象.append(元素) 或者 元素.appendTo(对象)
  $('#box').append($('#main'));
  $('#box').append(p);

//三、在元素内添加,依次(往前)添加:对象.prepend(元素);
  $('#box').prepend(p);

//四、在元素前添加兄弟元素,依次(往后)添加:对象.before(元素);
  $('#box').before(p);
 
//五,在元素后添加兄弟元素,依次(往前)添加:对象.after(元素);
  $('#box').after(p);

})
二、移除子元素

【1】清空子元素a:

$('#spanInfo a').empty();

【2】移除

$('#spanInfo').children().filter("a").remove();
//彻底删除 a 元素,包括其样式
三、jQuery判断一个元素是否有子元素

方法一:children() 判断子元素长度,children() 方法返回返回被选元素的所有直接子元素

if ($("#div").children().length == 0) {
	//不含子元素
}else{
	//含有子元素
}

方法二: has() 方法,has() 方法返回拥有匹配指定选择器的一个或多个元素在其内的所有元素

if($("#div:has(div)").length > 0){
	//含有子元素
}else{
	//不含子元素
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Sun Peng

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值