jquery获取自身元素的html
2016-03-21 18:23 youxin 阅读(29047) 评论(1) 编辑 收藏 举报在开发过程中，jQuery.html() 是获取当前节点下的html代码，并不包含当前节点本身的代码，然而我们有时候的确需要，可以通过jQuery.prop("outerHTML")的方式设置。
很多jQuery的使用者都对这一问题深感疑惑。为什么在众多方便的各种获取属性和设置属性的方法中就不能像DOM中一样直接设置html元素的outerHTML呢？
因为原生JS DOM里有一个内置属性 outerHTML （看清大小写哦，JS是区分大小写的）用来获取当前节点的html代码(包含当前节点)，所以用jQuery的prop()能拿到
一、jquery获取outerhtml
|
1
2
3
4
|
<div class="test"><p>hello，你好！</p></div><script>$(".test").prop("outerHTML");</script> |
html() 函数改变所匹配的 HTML 元素的内容（innerHTML）。
- .html()用为读取和修改元素的HTML标签
- .text()用来读取或修改元素的纯文本内容
- .val()用来读取或修改表单元素的value值。
二、jquery设置outerhtml
|
1
|
$('.test').prop('outerHTML', '<input>'); |
希望本文所述对大家的jQuery程序设计有所帮助。
一种办法;
1 <html>
2 <head>
3 <title>jQuery获取自身HTML</title>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <meta http-equiv="Content-Language" content="zh-CN" />
6 <script type="text/javascript" src="https://files.cnblogs.com/Zjmainstay/jquery-1.6.2.min.js"></script>
7 </head>
8 <body>
9 <div class="aa" style="border:1px solid #ABC;width:200px;text-align:center;">点击获取我自身的HTML吧</input>
10 <script type="text/javascript">
11 $(document).ready(function(){
12 $(".aa").click(function(){alert($("<p>").append($(this).clone()).html())});
13 });
14 </script>
15 </body>
16 </html>
原理：创建一个匿名Object，然后将自身加入其中，再取出匿名Object的html()便可得到自身HTML。
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
2015-03-21 构造函数为什么不能是虚函数
2014-03-21 php socket 通信
2014-03-21 php pack、unpack、ord 函数使用方法
2013-03-21 scheme学习资料
2013-03-21 scheme开发环境
2013-03-21 Lisp简介
2012-03-21 C++cin处理空格问题