[网页编程]-09 jQuery 操作元素对象的节点
-
添加元素节点
新建节点
$("节点标签")添加父级节点之后:
父级元素节点.append(子元素节点)
or
子元素节点.appendTo("父级元素节点")
添加父级节点之前:
父级元素节点.prepend(子元素节点)
or
子元素节点.prependTo("父级元素节点")
添加兄弟节点之前:
兄弟节点元素节点.before(子元素节点)
or
子元素节点.insertBefore("父级元素节点")
添加兄弟节点之后:
兄弟节点元素节点.after(子元素节点)
or
子元素节点.insertAfter("父级元素节点")
完整代码<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #div1{ height: 300px; border: 3px solid red; } p{ border: 1px solid orange; } </style> <script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function(){ //创建新的元素节点 var p = $("<p>List Item6</p>"); /* ***********************************增加子元素************************* */ /* ***********增加到现有元素之后************** */ //获取父级元素增加节点 -现有元素之后 //$("#div1").append(p); //把p元素增加到div里面 // p.appendTo("#div1") /* *************增加到现有元素之前**************** */ // p.prependTo("#div1"); //or // $("#div1").prepend(p); /* ******************************增加兄弟元素****************** */ /* 在div之前增加 */ //p.insertBefore("#div1") //or // $("#div1").before(p); /* 在div之后增加 */ //p.insertAfter("#div1") //or //$("#div1").after(p) }) </script> </head> <body> <div id="div1"> <p>List Item1</p> <p>List Item2</p> <p>List Item3</p> <p>List Item4</p> <p>List Item5</p> </div> </body> </html>
替换元素节点
写法参照截图
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #div1{ height: 300px; border: 3px solid red; } p{ border: 1px solid orange; } </style> <script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function(){ //创建新的元素节点 var p = $("<p><b>List Item6</b></p>"); /* **************************替换指定节点元素************************* */ // $("div p:nth-child(1)").replaceWith(p) p.replaceAll("div p:nth-child(2)"); }) </script> </head> <body> <div id="div1"> <p>List Item1</p> <p>List Item2</p> <p>List Item3</p> <p>List Item4</p> <p>List Item5</p> </div> </body> </html>
删除元素节点
jq.remove() 整个标签被删除在页面上不占位置;
清空内容
jq.empty()删除标签的内容.
清空某一个
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #div1{ height: 300px; border: 3px solid red; } p{ border: 1px solid orange; } </style> <script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function(){ //创建新的元素节点 var p = $("<p><b>List Item6</b></p>"); /* **************************删除指定节点元素************************* */ //删除div 标签 //$("#div1").remove(); //删除指定元素 // $("div p:nth-child(2)").remove(); //清空内容 //$("#div1").empty(); //清空某一个内容 $("div p:nth-child(2)").remove(); }) </script> </head> <body> <div id="div1"> <p>List Item1</p> <p>List Item2</p> <p>List Item3</p> <p>List Item4</p> <p>List Item5</p> </div> </body> </html>
练习
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> function insertNode(){ //创建节点对象 var p =$('<p>'+ '照片:<input type="file" name="" id="" value="" />'+ '<input type="button" name="" id="" value="删除" onclick="removeNode(this)" />'+ '</p>'); $("#last").before(p); } function removeNode(obj){ //js对象转换成jq对象 →$(obj) $(obj).parent().remove(); } </script> </head> <body> <form> <p> 用户名:<input type="text" name="" id="" value="" /> </p> <p> 照片:<input type="file" name="" id="" value="" /> <input type="button" name="" id="" value="添加" onclick="insertNode()" /> </p> <p id="last"> <input type="button" name="" id="" value="提交" /> <input type="button" name="" id="" value="清空" /> </p> </form> </body> </html>
网站声明：如果转载，请联系本站管理员。否则一切后果自行承担。
赞同 0
评论 0 条
- 上周热门
- 如何使用 StarRocks 管理和优化数据湖中的数据？ 2956
- 【软件正版化】软件正版化工作要点 2875
- 统信UOS试玩黑神话：悟空 2839
- 信刻光盘安全隔离与信息交换系统 2733
- 镜舟科技与中启乘数科技达成战略合作，共筑数据服务新生态 1267
- grub引导程序无法找到指定设备和分区 1231
- 华为全联接大会2024丨软通动力分论坛精彩议程抢先看！ 165
- 2024海洋能源产业融合发展论坛暨博览会同期活动-海洋能源与数字化智能化论坛成功举办 163
- 点击报名 | 京东2025校招进校行程预告 163
- 华为纯血鸿蒙正式版9月底见！但Mate 70的内情还得接着挖... 159
- 本周热议
- 我的信创开放社区兼职赚钱历程 40
- 今天你签到了吗？ 27
- 如何玩转信创开放社区—从小白进阶到专家 15
- 信创开放社区邀请他人注册的具体步骤如下 15
- 方德桌面操作系统 14
- 用抖音玩法闯信创开放社区——用平台宣传企业产品服务 13
- 我有15积分有什么用? 13
- 如何让你先人一步获得悬赏问题信息？（创作者必看） 12
- 2024中国信创产业发展大会暨中国信息科技创新与应用博览会 9
- 信创再发力！中央国家机关台式计算机、便携式计算机批量集中采购配置标准的通知 8
热门标签更多
