Jquery移動html到另一個標籤下
阿新 • • 發佈：2018-11-14
- 需求再現
<div id="div1"> <p>這是一段測試文字001</p> </div> <div id="div2"> <p>這是一段測試文字002</p> <div id="div2_0"> <p>這是一段測試文字003</p> </div> </div>
如上，我要將id為div2_0這個div包括裡面的p標籤移動到div1裡面，移動後的html程式碼如下：
<div id="div1"> <p>這是一段測試文字001</p> <div id="div2_0"> <p>這是一段測試文字003</p> </div> </div> <div id="div2"> <p>這是一段測試文字002</p> </div>
可能很容易想到用jQuery.html()這個方法實現，當然是不行的，因為jQuery.html() 是獲取當前節點下的html程式碼，並不包含當前節點本身的程式碼 ，比如:$("#div2_0").html();獲取到的是：<p>這是一段測試文字003</p>
- 問題解決
可以通過jQuery.prop("outerHTML");方法解決，這樣獲取到的html程式碼就包含當前節點本身了。js程式碼如下：
<script src="jquery/jquery-3.3.1.js"></script>
<script>
function moveHtml() {
var outHtml = $("#div2>#div2_0").prop("outerHTML"); //
- 完整程式碼
貼上我測試的完整程式碼，需要匯入jquery,點選下載
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>jquery獲取html（包含當前節點的）</title> <style> #div1 { height: 200px; width: 200px; background-color: red; } #div2 { height: 100px; width: 200px; background-color: blue; } #div2_0 { height: 50px; width: 150px; background-color: green; } </style> </head> <body> <div id="div1"> <p>這是一段測試文字001</p> </div> <div id="div2"> <p>這是一段測試文字002</p> <div id="div2_0"> <p>這是一段測試文字003</p> </div> </div> <br> <br> <input type="button" value="移動html" onclick="moveHtml();" /> <script src="jquery/jquery-3.3.1.js"></script> <script> function moveHtml() { var outHtml = $("#div2>#div2_0").prop("outerHTML"); //獲取到Html，包括當前節點 $("#div1").append(outHtml); //追加到div1內部 $("#div2>#div2_0").remove(); //刪除原來的html } </script> </body> </html>