Jquery移动html到另一个标签下
- 需求再现
<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"); //获取到Html，包括当前节点
$("#div1").append(outHtml); //追加到div1内部
$("#div2>#div2_0").remove(); //删除原来的html
}
</script>
- 完整代码
贴上我测试的完整代码，需要导入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>
