• 需求再现
<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>

Jquery移动html到另一个标签下的更多相关文章

  1. xpath获取一个标签下的多个同级标签

    一.问题: 我在使用xpath获取文章内容的时候会遇到,多个相同的标签在同一级下面,但是我们只需要获取一部分的内容.比如我不想需要原标题这些内容. 二.解决: Xpath中有一个position()的 ...

  2. jquery如何实现点击LI标签和下面的LI互换顺序？ 超简单代码

    转: jquery如何实现点击LI标签和下面的LI互换顺序? 上面的效果涉及jquery的两个方法: next()  :  获得匹配元素集合中每个元素紧邻的下一个同胞元素. after() :在被选元 ...

  3. jquery判断一个标签是否包含另外一个标签

    jquery判断一个标签是否包含另外一个标签 一.总结 一句话总结: jquery的find方法配合length属性:if($("#video_md_9_1").find(&quo ...

  4. jQuery获取元素上一个、下一个、父元素、子元素

    jQuery.parent(expr),找父亲节点,可以传入expr进行过滤,比如$("span").parent()或者$("span").parent(&q ...

  5. 表单验证——jquery validate使用说明【另一个教程】

    [参考:http://www.tuicool.com/articles/y6fyme] jQuery Validate jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证 ...

  6. 使用JS或jQuery模拟鼠标点击a标签事件代码

    原文 使用JS或jQuery模拟鼠标点击a标签事件代码 这篇文章主要介绍了使用JS或jQuery模拟鼠标点击a标签事件代码,需要的朋友可以参考下 <a id="alink" ...

  7. Jquery操作表格多出一个内容行

    目录 前言 需求 如何监听每一行点击,获取点击id 前后端 问题更新,ajax异步带来的问题 废弃使用HTML拼接 前言 我的前端实在是太差劲了,导致Jquery操作表格多出一个内容行,这个功能我都做 ...

  8. 一个标签的72变，打造一个纯CSS图标库

    每次要用到图标的时候都会到 icono 去copypaste,但每次用到的时候尺寸都各不一样,总是要调整参数,巨烦.当然你可以会想到用zoom.scale来做缩放,但是这样的缩放会使得线宽也变粗了,不 ...

  9. xss其他标签下的js用法总结大全

    前段时间我遇到一个问题,就是说普通的平台获取cookie的语句为↓           Default <script src=js地址></script> 1 <scr ...

随机推荐

  1. C++实现不能继承的类

    实现一个不能继承的类,这在Java等语言中是很好实现的,被final关键字修饰的类不能被继承. C++中没有类似的关键字,须自己实现.一般有如下两种方法: 1.设置构造方法与析构方法为私有 class ...

  2. Xcode控制台命令

    命令 解释 break NUM 在指定的行上设置断点 bt 显示所有的调用栈帧,该命令可用来显示函数的调用顺序 clear 删除设置在特定源文件.特定行上的断点,其用法为:clear FILENAME ...

  3. SQL Server排名函数与排名开窗函数

    什么是排名函数?说实话我也不甚清楚,我知道 order by 是排序用的,那么什么又是排名函数呢? 接下来看几个示例就明白了. 首先建立一个表,随便插入一些数据. ROW_NUMBER 函数:直接排序 ...

  4. Django：学习笔记(5)——会话

    Django:学习笔记(5)——会话 配置中间件 Django中使用会话,需要配置一个中间件. 配置会话引擎 默认情况下,Django在数据库中存储sessions(使用了django.contrib ...

  5. NIO 03

    1. 客户端要主动去连接:channel.connect(new InetSocketAddress("localhost",8888)); //用channel.finishCo ...

  6. Decker hello world

    Docker 允许在容器内运行应用程序, 使用 docker run 命令来在容器内运行一个应用程序. 输出Hello world root@ranxf:/home/ranxf# docker run ...

  7. 微服务—分布式服务追踪sleuth和zipkin

    随着业务的发展,系统规模也会越来越大,各微服务间的调用关系也越来越错综复杂. 通常一个客户端发起的请求在后端系统中会经过多个不同的微服务调用来协同产生最后的请求结果, 在复杂的微服务架构系统中,几乎每 ...

  8. Oracle中用触发器实现自动记录表数据被修改的历史信息

    oracle中用触发器实现自动记录表数据被修改的历史信息. 有一些比较重要的表字段每次修改需要做历史记录,以后可以查询这个表中某些字段如何被修改过.由什么改成了什么等,由谁操作,操作时间等. 实例:1 ...

  9. HttpWebRequest 返回BadRequest(400) 同时返回Response

    今天用Fiddler分析安卓APP的一个登陆功能的时候,账号和密码错误会返回相应的消息,并且状态码是400. 正常用法: /// <summary> /// 读取返回的内容 /// < ...

  10. git命令学习汇总

    GIT 版本控制常用命令汇总 git version 查看当前git版本信息 git help 获取全部命令帮助信息 git help <command> 获取指定命令帮助信息 git c ...