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>

 

posted @ 2018-11-14 11:51  敲代码的小松鼠  阅读(720)  评论(0编辑  收藏  举报

你若不想做,总会找到“接口”;你若想做,总会找到“方法”。