jQuery 學習-DOM篇（三）：jQuery 在 DOM 外部插入元素-變量-匯編語言學習筆記

jQuery 學習-DOM篇（三）：jQuery 在 DOM 外部插入元素

2023-11-18 阅读 15 评论 0

摘要：推薦閱讀 Helm3（K8S 資源對象管理工具）視頻教程：https://edu.csdn.net/course/detail/32506 Helm3（K8S 資源對象管理工具）博客專欄：https://blog.csdn.net/xzk9381/category_10895812.html 本文原文鏈接：https://blog.csdn

推薦閱讀

Helm3（K8S 資源對象管理工具）視頻教程：https://edu.csdn.net/course/detail/32506

Helm3（K8S 資源對象管理工具）博客專欄：https://blog.csdn.net/xzk9381/category_10895812.html

本文原文鏈接：https://blog.csdn.net/xzk9381/article/details/112906894，轉載請注明出處。如有發現文章中的任何問題，歡迎評論區留言。

一、在匹配的元素集合后面插入元素

使用 after() 方法可以在匹配的元素集合后面插入元素：

<!DOCTYPE html>
<html>
<head><title></title><script src="jquery-1.12.4.js"></script><script type="text/javascript">$('document').ready(function (){$('.div1').after($('<div class="mydiv" id="div2">測試</div>'))// $('.div1').after('<div class="mydiv" id="div2">測試</div>') 也可以直接寫成這種形式})</script>
</head>
<body><div class="div1">div測試</div><div class="div1">div測試</div>
</body>
</html>

使用 $(‘content’).insertAfter(‘DOM’) 也可以實現這個功能，只不過內容和目標的位置不同：

<!DOCTYPE html>
<html>
<head><title></title><script src="jquery-1.12.4.js"></script><script type="text/javascript">$('document').ready(function (){$('<div class="mydiv" id="div2">測試</div>').insertAfter('.div1')})</script>
</head>
<body><div class="div1">div測試</div><div class="div1">div測試</div>
</body>
</html>

二、在匹配元素集合的前面插入元素

使用 before() 方法可以在匹配的元素集合前面插入元素：

<!DOCTYPE html>
<html>
<head><title></title><script src="jquery-1.12.4.js"></script><script type="text/javascript">$('document').ready(function (){$('.div1').before($('<div class="mydiv" id="div2">測試</div>'))// $('.div1').before('<div class="mydiv" id="div2">測試</div>') 也可以直接寫成這種形式})</script>
</head>
<body><div class="div1">div測試</div><div class="div1">div測試</div>
</body>
</html>

使用 $(‘content’).insertBefore(‘DOM’) 也可以實現這個功能，只不過內容和目標的位置不同：

<!DOCTYPE html>
<html>
<head><title></title><script src="jquery-1.12.4.js"></script><script type="text/javascript">$('document').ready(function (){$('<div class="mydiv" id="div2">測試</div>').insertBefore('.div1');})</script>
</head>
<body><div class="div1">div測試</div><div class="div1">div測試</div>
</body>
</html>

本文原文鏈接：https://blog.csdn.net/xzk9381/article/details/112906894，轉載請注明出處。如有發現文章中的任何問題，歡迎評論區留言。

原文链接：https://hbdhgg.com/2/177817.html

发表评论: