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>
Jquery移动html到另一个标签下的更多相关文章
- xpath获取一个标签下的多个同级标签
一.问题: 我在使用xpath获取文章内容的时候会遇到,多个相同的标签在同一级下面,但是我们只需要获取一部分的内容.比如我不想需要原标题这些内容. 二.解决: Xpath中有一个position()的 ...
- jquery如何实现点击LI标签和下面的LI互换顺序？ 超简单代码
转: jquery如何实现点击LI标签和下面的LI互换顺序? 上面的效果涉及jquery的两个方法: next() : 获得匹配元素集合中每个元素紧邻的下一个同胞元素. after() :在被选元 ...
- jquery判断一个标签是否包含另外一个标签
jquery判断一个标签是否包含另外一个标签 一.总结 一句话总结: jquery的find方法配合length属性:if($("#video_md_9_1").find(&quo ...
- jQuery获取元素上一个、下一个、父元素、子元素
jQuery.parent(expr),找父亲节点,可以传入expr进行过滤,比如$("span").parent()或者$("span").parent(&q ...
- 表单验证——jquery validate使用说明【另一个教程】
[参考:http://www.tuicool.com/articles/y6fyme] jQuery Validate jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证 ...
- 使用JS或jQuery模拟鼠标点击a标签事件代码
原文 使用JS或jQuery模拟鼠标点击a标签事件代码 这篇文章主要介绍了使用JS或jQuery模拟鼠标点击a标签事件代码,需要的朋友可以参考下 <a id="alink" ...
- Jquery操作表格多出一个内容行
目录 前言 需求 如何监听每一行点击,获取点击id 前后端 问题更新,ajax异步带来的问题 废弃使用HTML拼接 前言 我的前端实在是太差劲了,导致Jquery操作表格多出一个内容行,这个功能我都做 ...
- 一个标签的72变，打造一个纯CSS图标库
每次要用到图标的时候都会到 icono 去copypaste,但每次用到的时候尺寸都各不一样,总是要调整参数,巨烦.当然你可以会想到用zoom.scale来做缩放,但是这样的缩放会使得线宽也变粗了,不 ...
- xss其他标签下的js用法总结大全
前段时间我遇到一个问题,就是说普通的平台获取cookie的语句为↓ Default <script src=js地址></script> 1 <scr ...
随机推荐
- DNS 知识点
总结: DNS解析过程:主机查看本地缓存,然后向本地域名服务器进行递归查询,本地域名服务器向根,顶级,权限进行迭代查询 DNS 解析过程: 1.查看浏览器缓存 2.查看os缓存 w ...
- jQuery -> 使用andSelf()来包括之前的选择集
版权声明:本文为博主原创文章.转载请注明出处 https://blog.csdn.net/FeeLang/article/details/26254793 当我们使用Destructive Metho ...
- 011-Shell 文件包含
和其他语言一样,Shell 也可以包含外部脚本.这样可以很方便的封装一些公用的代码作为一个独立的文件. Shell 文件包含的语法格式如下: . filename # 注意点号(.)和文件名中间有一空 ...
- BlueZ
一.BlueZ在ubuntu PC上的基础应用 1.bluez的安装及基本功能 dong@ubuntu:~/bluez$ lsbluez-5.47.tar.xz SPP-loopback.pydo ...
- python16_day23【cmdb前端】
一.cmdb前端 https://github.com/willianflasky/growup/tree/master/s16/homework/day23_cmdb_web/s16MadKing ...
- 前端学习笔记之HTML DOM操作
HTML DOM 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). DOM节点类型 文档节点 (document,唯一) 元素节点 (那些个标签div ...
- 160726 smarty 笔记(2)
<?php //取当前页 $p=1; if(!empty($_GET["page"])) { $p=$_GET["page"]; } //定义页面缓存文件 ...
- hdu2609 How many
地址:http://acm.hdu.edu.cn/showproblem.php?pid=2609 题目: How many Time Limit: 2000/1000 MS (Java/Others ...
- Postman 把response的值自动放到变量里
@ 1里面定义个变量2 3这里加上postman.setEnvironmentVariable("MatchID",JSON.parse(responseBody)); 这样rep ...
- XPath Checker 和 firebug 插件使用
安装插件: 1.firebug 2.FirePath 3.xpath finder 4.XPath Checker XPath Checker 下载安装 https://addons.mozilla. ...