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():將對象的后代元素全部清空，但是保留當前對象以及其屬性節點
?
總結
以上是生活随笔為你收集整理的DOM操作之CRUD操作的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Spring（IOC+AOP）
- 下一篇： 隔行换色案例||全选和全不选||QQ表情