
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>