js的outerHTML 与jquery的prop()的用法

最新推荐文章于 2022-09-15 22:00:00 发布
最新推荐文章于 2022-09-15 22:00:00 发布
阅读量3.8k 收藏
点赞数
分类专栏： 前端脚本(html js jQuery)

var xhtml = document.getElementById("__tip__script").outerHTML;

var xhtml = $("#__tip__script")[0].outerHTML;

var xhtml = $("#__tip__script").prop("outerHTML");

上面三者的取值完全相同

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Expires" content="0">
	<meta http-equiv="Cache-Control" content="no-cache">
	<meta http-equiv="Pragma" content="no-cache">
    <title>outerHTML.html</title>
    <style>
    *{
    margin:5px;
    }
    </style>
</head>
<body >

<pre >
	<input type="button"  οnclick="get_outerHTML()"  value="get_outerHTML">
	<input type="button"  οnclick="set_outerHTML()"  value="set_outerHTML">
	<input type="button"  οnclick="get_jquery_prop()"  value="get_jquery_prop">
</pre>

<textarea rows="" cols="" id="__tip__script" style="width:660px;height:150px;border:2px solid  red;" >
<div class="weui_dialog_alert" id="__tip__script2" style="display: none;"> 
	<div class="weui_mask"></div>
	<div class="weui_dialog tip">
		<div class="weui_dialog_tip">__content__</div> 
	</div> 
</div>
</textarea>


</body>

<script src="./js/jquery-1.8.3.min.js"  ></script>
<script type="text/javascript"  >
function get_outerHTML() {
	var xhtml=document.getElementById("__tip__script");
	//var xhtml=$("#__tip__script")[0];
	console.log(xhtml);
	
	var _html=xhtml.outerHTML;
	console.log(_html);
}
function set_outerHTML() {
	var xhtml="<div>aaaaaaaaaaaaaaaaa</div>";
	//consol
	document.getElementById("__tip__script").outerHTML=xhtml;
	get_outerHTML();
}

function get_jquery_prop() {
	var xhtml = $("#__tip__script").prop("outerHTML");
	console.log(xhtml);
}
function set_jquery_prop() {
	var xhtml = $("#__tip__script").prop("outerHTML");
	console.log(xhtml);
}

</script>
</html>


猎人在吃肉
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Firefox中使用outerHTML的2种解决方法
09-04
主要介绍了Firefox中使用outerHTML的2种解决方法,需要的朋友可以参考下
jquery获取及设置outerhtml的方法
12-01
本文实例讲述了jquery获取及设置outerhtml的方法。分享给大家供大家参考。具体分析如下： 在开发过程中，jQuery.html() 是获取当前节点下的html代码，并不包含当前节点本身的代码，然而我们有时候的确需要，可以通过jQuery.prop(“outerHTML”)的方式设置。 很多jQuery的使用者都对这一问题深感疑惑。为什么在众多方便的各种获取属性和设置属性的方法中就不能像DOM中一样直接设置html元素的outerHTML呢？ 因为原生JS DOM里有一个内置属性 outerHTML （看清大小写哦，JS是区分大小写的）用来获取当前节点的html代码(包含当前节点)，所
简单说下outerHTML、innerHTML和innerTEXT的区别及用法
Java高知社区
08-12 4708
在别人的博客上找到一篇简单介绍outerHTML、innerHTML和innerTEXT的区别及用法，下面弄过来和大家一起分享一下。 outerHTML的用法与innerHTML不同，outerHTML包括整个标签，而不仅限于标签内部的内容。对于一个id为"testdiv"的d
php渲染html用jquery,怎样用jQuery来获取outerHTML属性？
weixin_31096417的博客
04-02 235
获取元素的内容(并包含元素本身)原生js 或 jQuery能实现吗？都能，代码如下：1、js：ele.outerHTML2、jq：$(ele)[0].outerHTML也许没看这篇文章前，很多做开发的朋友都会用上面的代码去实现。上面两种写法固然没错，只是我们要知道：其实用jq的话，不用把jq对象转换成js Dom对象也照样能实现获取元素的内容(并包含元素本身)！怎么去写呢？先不急，我们先看下国外...
jquery中获取outerHTML
Hello World
10-30 2045
//首先引入jquery $("#id").prop("outerHTML");
jquery prop(“outerHTML“) 获取当前标签和标签内部的html 代码
猎人在吃肉
08-27 2285
原生JS DOM里有一个内置属性 outerHTML，用来获取当前节点的html代码(包含当前节点)，所以用jQuery的prop()能拿到。 $(".test").prop("outerHTML"); jquery设置outerhtml $('.test').prop('outerHTML', '<div>'); https://blog.csdn.net/yh12346789/article/details/79781204 ...
InnerHTML、InnerText、outerHTML的用法与区别
m0_48845795的博客
05-12 225
InnerHTML、InnerText、outerHTML的用法与区别 InnerHTML获取或设置指定元素标记内的HTML内容，从元素标记的开始到元素标记的结束 InnerText获取或设置指定元素标记内的文本的值，从元素标记的开始到元素标记的结束（不包括HTML标记） outerHTML指的是除了包含innerHTML的全部内容外, 还包含对象标签本身。 innerHTML和innerText的区别： InnerHTML返回标记内的HTML内容，其中包含HTML标记。 InnerText返回标记内文本的
【jQuery 使用】 利用jQuery.prop("outerHTML")获取包含自身在内的HTML元素的HTML代码...
weixin_34376562的博客
08-04 251
jQuery.html() 是获取当前节点下的html代码，并不包含当前节点本身的代码，然而我们有时候的确需要，可以通过jQuery.prop("outerHTML")的方式设置。 很多jQuery的使用者都对这一问题深感疑惑。为什么在众多方便的各种获取属性和设置属性的方法中就不能像DOM中一样直接设置html元素的outerHTML呢？ 因为原生JS DOM里有一个内置属性 outerHTM...
html页面的text用法,js中innerHTML，innerText，outerHTML用法总结
weixin_35572076的博客
06-07 808
如何获取DIV里面的内容，在js中为大家提供了三种方法，分别是outerHTML、innerHTML和innerText，这里要注意大小写！看起来长得很像，那么到底怎么使用以及它们之间有什么区别，我想很多人不是很了解，不过没关系，牛人博客将为大家详细的介绍他们三者的区别，同时也会为大家带来除了javascript提供的三种方法外，我自己在项目中用到的一种兼容各浏览器(包括火狐游览器)。相信通过本文...
document.getElementById()报错处理
cnds123的专栏
09-15 8017
本文介绍document.getElementById()报错原因及处理
jquery 获取 outerHtml 包含当前节点本身的代码
12-02
在开发过程中，jQuery.html() 是获取当前节点下的html代码，并不...jQuery.prop(“outerHTML”); 代码如下: ”test”><p>hello，你好！</p></div> [removed] $(“.test”).prop(“outerHTML”); [removed] 输出结果
javascript innerHTML、outerHTML、innerText、outerText的区别
10-30
主要介绍了javascript innerHTML、outerHTML、innerText、outerText的区别,本文讲解了它们的功能、使用实例、和不同之处,需要的朋友可以参考下
JS中innerHTML、outerHTML、innerText 、outerText、value的区别与联系？jQuery中的text()、html()和val() ？...
weixin_30304375的博客
06-01 521
一、JS中innerHTML、outerHTML、innerText 、outerText、value的区别与联系？ 1、innerHTML 属性 （参考自《JavaScript高级程序设计》294页） 在读模式下，innerHTML 属性返回与调用元素的所有子节点（包括元素、注释和文本节点）对应的 HTML 标记。在写模式下，innerHTML 会根据指定的值创建新的 DOM 树，然后用这...
html中添加空格的四种方法
qq_25175063的博客
04-25 2万+
一、直接使用键盘上的空格键         使用这种方法可以直接添加空格，在html读取是浏览器会自动转换。不好的是，该方法只能添加一个空格，比如你按下三下空格键但是在显示的时候会只有一个空格，后面的会被覆盖掉、   二、使用&amp;nbsp;         这种是不换行空格，会一直累加到后面，有多少就显示多少。缺点是会受到字体宽度的影响（很明显！）。两个&amp;nbsp;邓等于一个...
jsquery获取页面元素的html代码,【jQuery 使用】 利用jQuery.prop("outerHTML")获取包含自身在内的HTML元素的HTML代码...
weixin_32263265的博客
06-04 632
jQuery.html() 是获取当前节点下的html代码，并不包含当前节点本身的代码，然而我们有时候的确需要，可以通过jQuery.prop("outerHTML")的方式设置。很多jQuery的使用者都对这一问题深感疑惑。为什么在众多方便的各种获取属性和设置属性的方法中就不能像DOM中一样直接设置html元素的outerHTML呢？因为原生JS DOM里有一个内置属性 outerHTML (看...
深入学习jQuery描述文本内容的3个方法
weixin_34185512的博客
09-28 96
前面的话 　　在javascript中，描述元素内容有5个属性，分别是innerHTML、outerHTML、innerText、outerText和textContent。这5个属性各自有各自的功能，且兼容性不同。jQuery针对这样的处理提供了3个便捷的方法，分别是：html()、text()和val()。本文将详细介绍jQuery描述文本内容的这3个方法   html() 　　htm...
document.getElementById()方法使用
热门推荐
酣睡的熊㊣的技术博客
02-07 36万+
document.getElementById使用 语法：oElement = document .getElementById ( sID ) 参数：sID――必选项。字符串 (String) 。 返回值：oElemen――对象 (Element) 。 说明：根据指定的 id 属性值得到对象。返回 id 属性值等于 sID 的第一个对象的引用。假如对应的为一组对象，则返回该组对象中的第一
神经网络与量子计算的交叉研究.pptx
最新发布
04-19
神经网络与量子计算的交叉研究.pptx
怎么通过jquery获取outerHTML
06-09
可以使用 jQuery 的 `prop` 方法获取元素的 outerHTML，如下所示： ``` var outerHtml = $('#myElement').prop('outerHTML'); console.log(outerHtml); ``` 上面的代码中，`#myElement` 是你要获取 outerHTML 的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值