AIDE技术官网
AIDEZY.COM

JQuery删除增加节点的几种方法实例

AIDE技术网-aidezy.com
JQuery删除节点的4种方法实例

JQuery删除节点的4种方法实例

JQuery删除节点的4种方法实例:

 

jquery删除4种节点的方法,包括同级别删除等等

 

实例代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>

<br>

<button onclick="shan();">删除节点第一种方法</button>
<button onclick="shan2();">删除节点第二种方法</button>
<br>
<button onclick="zeng();">增加子节点</button>

<button onclick="zeng2();">增加同级别节点</button>

<script type="text/javascript" src="jquery-3.4.1.js"></script>


<script type="text/javascript">

//删除节点第一种方法,remove
//blog:aidezy.com
function shan(){
//此方法ul一同删除
$('ul').remove();
}

function shan2(){
//此方法不删除ul标签,只删除他的儿子li标签
$('ul').empty();
}


function zeng(){
//以下三种写法都是添加的子节点
//第一种写法
$('<li>5</li>').appendTo('ul');
//第二种写法
$('ul').append($('<li>5</li>'));
//prep增加到节点前面
$('ul').prepend($('<li>6</li>'));
}


function zeng2(){
// $('').after('ul');
$('ul').after($('<ul><li>我是同级别的ul节点</li></ul>'));
//before同级别的前面加
$('ul').before($('<ul><li>我是同级别的ul节点2</li></ul>'));
}

</script>

</html>

搜一下

赞(1) 打赏
AIDE技术网-aidezy.com 广告
AIDE技术网-aidezy.com 广告

来都来了!评论一下呗! 抢沙发

  • QQ (自动获取名称头像等信息|选填)
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址 (选填)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
切换登录

注册