文章目录
- 一、jQuery中动态创建`添加`元素/的方法
- 二、`移除`子元素
- 三、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{
//不含子元素
}