在开发过程中,jQuery.html() 是获取当前节点下的html代码,并不包含当前节点本身的代码,然而我们有时候的确需要,可以通过jQuery.prop("outerHTML")的方式设置。
很多jQuery的使用者都对这一问题深感疑惑。为什么在众多方便的各种获取属性和设置属性的方法中就不能像DOM中一样直接设置html元素的outerHTML呢?
因为原生JS DOM里有一个内置属性 outerHTML (看清大小写哦,JS是区分大小写的)用来获取当前节点的html代码(包含当前节点),所以用jQuery的prop()能拿到
一、jquery获取outerhtml
<div class="test"><p>hello,你好!</p></div>
<script>
$(".test").prop("outerHTML");
</script>
html() 函数改变所匹配的 HTML 元素的内容(innerHTML)。
- .html()用为读取和修改元素的HTML标签
- .text()用来读取或修改元素的纯文本内容
- .val()用来读取或修改表单元素的value值
二、jquery设置outerhtml
$('.test').prop('outerHTML', '<input>');
<html>
<head>
<title>jQuery获取自身HTML</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<script type="text/javascript" src="http://files.cnblogs.com/Zjmainstay/jquery-1.6.2.min.js"></script>
</head>
<body>
<div class="aa" style="border:1px solid #ABC;width:200px;text-align:center;">点击获取我自身的HTML吧</div>
<script type="text/javascript">
$(document).ready(function(){
$(".aa").click(function(){alert($("<p>").append($(this).clone()).html())});
});
</script>
</body>
</html>
运行结果如下: