當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

DOM操作之CRUD操作

發布時間：2025/4/16 编程问答 27 豆豆

生活随笔收集整理的這篇文章主要介紹了 DOM操作之CRUD操作小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

CRUD操作:
?? ??? ?1. append():父元素將子元素追加到末尾
?? ??? ??? ?* 對象1.append(對象2): 將對象2添加到對象1元素內部，并且在末尾
?? ??? ?2. prepend():父元素將子元素追加到開頭
?? ??? ??? ?* 對象1.prepend(對象2):將對象2添加到對象1元素內部，并且在開頭
?? ??? ?3. appendTo():
?? ??? ??? ?* 對象1.appendTo(對象2):將對象1添加到對象2內部，并且在末尾
?? ??? ?4. prependTo()：
?? ??? ??? ?* 對象1.prependTo(對象2):將對象1添加到對象2內部，并且在開頭

? ? ? ? 5. after():添加元素到元素后邊
?? ??? ??? ?* 對象1.after(對象2)：將對象2添加到對象1后邊。對象1和對象2是兄弟關系
?? ??? ?6. before():添加元素到元素前邊
?? ??? ??? ?* 對象1.before(對象2)：將對象2添加到對象1前邊。對象1和對象2是兄弟關系
?? ??? ?7. insertAfter()
?? ??? ??? ?* 對象1.insertAfter(對象2)：將對象2添加到對象1后邊。對象1和對象2是兄弟關系
?? ??? ?8. insertBefore()
?? ??? ??? ?* 對象1.insertBefore(對象2)：將對象2添加到對象1前邊。對象1和對象2是兄弟關系

04-create&append.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head><title>內部插入腳本</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><script src="../js/jquery-3.3.1.min.js"></script><style type="text/css">div,span{width: 140px;height: 140px;margin: 20px;background: #9999CC;border: #000 1px solid;float:left;font-size: 17px;font-family:Roman;}div .mini{width: 30px;height: 30px;background: #CC66FF;border: #000 1px solid;font-size: 12px;font-family:Roman;}div.visible{display:none;}</style><script type="text/javascript">$(function () {// <input type="button" value="將反恐放置到city的后面" id="b1"/>$("#b1").click(function () {//append//$("#city").append($("#fk"));//appendTo$("#fk").appendTo($("#city"));});// <input type="button" value="將反恐放置到city的最前面" id="b2"/>$("#b2").click(function () {//prepend//$("#city").prepend($("#fk"));//prependTo$("#fk").prependTo($("#city"));});// <input type="button" value="將反恐插入到天津后面" id="b3"/>$("#b3").click(function () {//after//$("#tj").after($("#fk"));//insertAfter$("#fk").insertAfter($("#tj"));});// <input type="button" value="將反恐插入到天津前面" id="b4"/>$("#b4").click(function () {//before//$("#tj").before($("#fk"));//insertBefore$("#fk").insertBefore($("#tj"));});});</script></head><body><input type="button" value="將反恐放置到city的后面" id="b1"/><input type="button" value="將反恐放置到city的最前面" id="b2"/><input type="button" value="將反恐插入到天津后面" id="b3"/><input type="button" value="將反恐插入到天津前面" id="b4"/><ul id="city"><li id="bj" name="beijing">北京</li><li id="tj" name="tianjin">天津</li><li id="cq" name="chongqing">重慶</li></ul><ul id="love"><li id="fk" name="fankong">反恐</li><li id="xj" name="xingji">星際</li></ul><div id="foo1">Hello1</div> </body></html>

?? ??? ?9. remove():移除元素
?? ??? ??? ?* 對象.remove():將對象刪除掉
?? ??? 10. empty():清空元素的所有后代元素。
?? ??? ??? ?* 對象.empty():將對象的后代元素全部清空，但是保留當前對象以及其屬性節點

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head><title>刪除節點</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><script src="../js/jquery-3.3.1.min.js"></script><script type="text/javascript">$(function () {// <input type="button" value="刪除<li id='bj' name='beijing'>北京</li>" id="b1"/>$("#b1").click(function () {$("#bj").remove();});// <input type="button" value="刪除city所有的li節點清空元素中的所有后代節點(不包含屬性節點)" id="b2"/>$("#b2").click(function () {$("#city").empty();});});</script></head><body><input type="button" value="刪除<li id='bj' name='beijing'>北京</li>" id="b1"/><input type="button" value="刪除所有的子節點清空元素中的所有后代節點(不包含屬性節點)" id="b2"/><ul id="city"><li id="bj" name="beijing">北京</li><li id="tj" name="tianjin">天津</li><li id="cq" name="chongqing">重慶</li></ul><p class="hello">Hello</p> how are <p>you?</p> </body> </html>

總結

以上是生活随笔為你收集整理的DOM操作之CRUD操作的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Spring（IOC+AOP）
下一篇：隔行换色案例||全选和全不选||QQ表情