jquery prop(“outerHTML“) 获取当前标签和标签内部的html 代码

最新推荐文章于 2020-10-15 15:23:17 发布
最新推荐文章于 2020-10-15 15:23:17 发布
阅读量2.7k 收藏 1
点赞数
分类专栏： 前端脚本(html js jQuery) 文章标签： js jquery prop outerHTML
在注明出处的前提下，欢迎任何形式的转载。
本文链接：https://blog.csdn.net/xiaojin21cen/article/details/108258640
版权
本文介绍使用jQuery实现动态添加和删除表格行的方法，通过复制模板行并修改元素ID和名称，确保每行唯一性。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

原生JS DOM里有一个内置属性 outerHTML，用来获取当前节点的html代码(包含当前节点)，所以用jQuery的prop()能拿到。

$(".test").prop("outerHTML");

jquery设置outerhtml
$('.test').prop('outerHTML', '<div>');

https://blog.csdn.net/yh12346789/article/details/79781204

示例1、jquery 动态添加一行：

代码

<!DOCTYPE html>
<html>
<head>
<title> jquery 动态添加一行</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">

<style type="text/css">
html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}
 
body {
    margin: 10px;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
 
td,th {
    padding: 0;
}
 
.pure-table {
    border-collapse: collapse;
    border-spacing: 0;
    empty-cells: show;
    border: 1px solid #cbcbcb;
}
 
.pure-table caption {
    color: #000;
    font: italic 85%/1 arial,sans-serif;
    padding: 1em 0;
    text-align: center;
}
 
.pure-table td,.pure-table th {
    border-left: 1px solid #cbcbcb;
    border-width: 0 0 0 1px;
    font-size: inherit;
    margin: 0;
    overflow: visible;
    padding: .5em 1em;
}
 
.pure-table thead {
    background-color: #e0e0e0;
    color: #000;
    text-align: left;
    vertical-align: bottom;
}
 
.pure-table td {
    background-color: transparent;
}
 
.pure-table-bordered td {
    border-bottom: 1px solid #cbcbcb;
}
 
.pure-table-bordered tbody>tr:last-child>td {
    border-bottom-width: 0;
}
</style>
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
	
<script type="text/javascript">

// 复制一行
function cpLine(){
	var line=$("#line").prop("outerHTML");
	//console.log(line)  // 打印 html
		
	// 将内容添加到table的最后一行
	$(line).appendTo("table");		
}

// 删除一行
function delLine(obj){
	$(obj).parents("tr").remove();				
}
</script>

</head>
<body>	
	
	<input type="button" value="复制一行" onclick="cpLine()" >
	
	<table  class="pure-table pure-table-bordered" >
		<thead>
			<tr>				
				<td>性别</td>
				<td>年龄</td>
				<td>备注</td>
				<td>操作</td>
			</tr>
		</thead>
		<tbody>
			<tr  id="line"  >				
				<td class="sex" >				
					<select id="sex" name="sex" >
						<option value="">--请选择--</option>
						<option>男</option>
						<option>女</option>
					</select>
				</td>
				<td class="age">
					<input type="text" name="age"  id="age" >
				</td>
				<td  class="remark">
					<input type="text" name="remark"  id="remark" >
				</td>
				<td>
					<input type="button" value="删除" onclick="delLine(this)" >
				</td>
			</tr>
		</tbody>
	</table>	
	
</body>
</html>

示例2、jquery 动态添加一行，并修改input的id，name的值：

代码

<!DOCTYPE html>
<html>
<head>
<title> jquery 动态添加一行，并修改input的id，name的值 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">

<style type="text/css">
html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}
 
body {
    margin: 10px;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
 
td,th {
    padding: 0;
}
 
.pure-table {
    border-collapse: collapse;
    border-spacing: 0;
    empty-cells: show;
    border: 1px solid #cbcbcb;
}
 
.pure-table caption {
    color: #000;
    font: italic 85%/1 arial,sans-serif;
    padding: 1em 0;
    text-align: center;
}
 
.pure-table td,.pure-table th {
    border-left: 1px solid #cbcbcb;
    border-width: 0 0 0 1px;
    font-size: inherit;
    margin: 0;
    overflow: visible;
    padding: .5em 1em;
}
 
.pure-table thead {
    background-color: #e0e0e0;
    color: #000;
    text-align: left;
    vertical-align: bottom;
}
 
.pure-table td {
    background-color: transparent;
}
 
.pure-table-bordered td {
    border-bottom: 1px solid #cbcbcb;
}
 
.pure-table-bordered tbody>tr:last-child>td {
    border-bottom-width: 0;
}
</style>
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
	
<script type="text/javascript">

// 复制一行
function cpLine(){
	var line=$("#line").prop("outerHTML");
	//console.log(line)  // 打印 html
	
	//获取当前最后一行的序号的值
	var num=$("table").find("tr:visible:last").find(".num").text();
	//console.log("num = "+num)
	if(undefined == num){
		num=0;
	}
	
	num=parseInt(num)+1; // 序号加 1
	
	var result = $(line).show()
	.find(".num").html(num).end() //序号	
	.find(".sex").find("#sex").prop("name","sex"+num).prop("id","sex"+num).end().end()  //修改性别中的id、name
	.find(".age").find("#age").prop("name","age"+num).prop("id","age"+num).end().end()  //修改年龄中的id、name
	.find(".remark").find("#remark").prop("name","remark"+num).prop("id","remark"+num).end().end()   //修改备注中的id、name 
	
	// 打印修改后的 html
	console.log($(result).prop("outerHTML"))
	
	// 将修改后的内容添加到table的最后一行
	$(result).appendTo("table");		
}

// 删除一行
function delLine(obj){
	$(obj).parents("tr").remove();				
}
</script>

</head>
<body>	
	
	<input type="button" value="复制一行" onclick="cpLine()" >
	
	<table  class="pure-table pure-table-bordered" >
		<thead>
			<tr>
				<td>序号</td>
				<td>性别</td>
				<td>年龄</td>
				<td>备注</td>
				<td>操作</td>
			</tr>
		</thead>
		<tbody>
			<tr  id="line" style="display:none" >
				<td class="num">
					0
				</td>
				<td class="sex" >				
					<select id="sex" name="sex" >
						<option value="">--请选择--</option>
						<option>男</option>
						<option>女</option>
					</select>
				</td>
				<td class="age">
					<input type="text" name="age"  id="age" >
				</td>
				<td  class="remark">
					<input type="text" name="remark"  id="remark" >
				</td>
				<td>
					<input type="button" value="删除" onclick="delLine(this)" >
				</td>
			</tr>
		</tbody>
	</table>
	
	
</body>
</html>

运行结果：

在这里插入图片描述

说明

动态添加一行前，首先要写出一行，并将其隐藏，
然后每次添加时，复制隐藏行的代码，并在代码的基本上进行修改。

每行中的序号、性别、年龄、年龄 input 标签中的id和name，通过序号加1的方式，让其都是唯一的。

jquery获取及设置outerhtml的方法
10-24
主要介绍了jquery获取及设置outerhtml的方法,实例分析了jQuery实现针对outerhtml操作的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
jquery 获取 outerHtml 包含当前节点本身的代码
12-02
当我们使用`jQuery.prop("outerHTML")`时，实际上是在调用这个原生属性，从而获取到包含当前元素在内的完整HTML结构。 以下是一个例子： ```html <p>hello，你好！ <script src="https://code.jquery....
JQuery html()和 prop("outerHTML")区别以及控件内容和选项保持问题
光明小学王小雨的博客
01-07 1070
jQuery.html() 是获取当前节点下的html代码，并不包含当前节点本身的代码 jQuery.prop(“outerHTML”)可以获取获取包含自身的HTML代码 使用html（）和 prop(“outerHTML”)来获取节点的HTML代码，不会保持input和select中的值 而使用clone（）复制html对象的话，会保持input的值，不会保持select中的值 $("#...
jquery中获取outerHTML
Hello World
10-30 2143
//首先引入jquery $("#id").prop("outerHTML");
【jQuery 使用】 利用jQuery.prop("outerHTML")获取包含自身在内的HTML元素的HTML代码...
weixin_34376562的博客
08-04 290
jQuery.html() 是获取当前节点下的html代码，并不包含当前节点本身的代码，然而我们有时候的确需要，可以通过jQuery.prop("outerHTML")的方式设置。 很多jQuery的使用者都对这一问题深感疑惑。为什么在众多方便的各种获取属性和设置属性的方法中就不能像DOM中一样直接设置html元素的outerHTML呢？ 因为原生JS DOM里有一个内置属性 outerHTM...
jQuery 获取当前节点的html包含当前节点的方法
weixin_30408739的博客
01-16 218
在开发过程中，jQuery.html() 是获取当前节点下的html代码，并不包含当前节点本身的代码，然后我们有时候确需要，找遍jQuery api文档也没有任何方法可以拿到。 看到有的人通过parent().html()，如果当前元素没有兄弟元素还行，如果有那就行不通了。后台实验发现有一个jQuery的一个方法可以解决，而且非常简便，如下： jQuery.prop("outerHT...
利用jQuery.prop(“outerHTML“)获取包含自身在内的HTML元素的HTML代码
weixin_42549581的博客
10-15 412
JQuery.html() 是获取当前节点下的html代码，并不包含当前节点本身的代码，然而我们有时候的确需要，可以通过jQuery.prop(“outerHTML”)的方式设置。 很多jQuery的使用者都对这一问题深感疑惑。为什么在众多方便的各种获取属性和设置属性的方法中就不能像DOM中一样直接设置html元素的outerHTML呢？ 因为原生JS DOM里有一个内置属性 outerHTML （看清大小写哦，JS是区分大小写的）用来获取当前节点的html代码(包含当前节点)，所以用jQuery的prop
jQuery outerHTML
张大贝的blog
04-16 210
  (function($) { $.fn.outerHTML = function() { return $(this).clone().wrap('&lt;div&gt;&lt;/div&gt;').parent().html(); } })(jQuery);  
怎么通过jquery获取outerHTML
最新发布
06-09
可以使用 jQuery 的 `prop` 方法获取元素的 outerHTML，如下所示： ``` var outerHtml = $('#myElement').prop('outerHTML'); console.log(outerHtml); ``` 上面的代码中，`#myElement` 是你要获取 outerHTML 的...
jquery 获取自身的html outerhtml
自由游的蛙
01-31 5414
jQuery.fn.outerHTML = function (s) {     //return (s) ? this.before(s).remove() : jQuery("<p>").append(this.eq(0).clone()).html();     return (s) ? this.before(s).remove() : jQuery("").append(
jquery-outerhtml:与仅返回元素HTML内容的jQuery.html（）不同，jQuery.outerHTML（）返回所选元素及其HTML内容，或将其替换为jQuery.replaceWith（）方法，但不会丢失链接。 此版本引入了对用DOM Elements和jQuery对象替换一组匹配元素的支持。 它还介绍了对.outerHTML（function）的支持。 查看版本注释以获取更多详细信息
05-08
介绍 与仅返回元素HTML内容的$.html()不同， $.outerHTML()返回所选元素及其HTML内容，或将其替换为jQuery.replaceWith()方法，但不会丢失链接。 此版本引入了对用DOM Elements和jQuery对象替换一组匹配元素的支持。 它还介绍了对.outerHTML(function)的支持。 有关更多详细信息，请参见版本说明。 检查“示例”文件夹中的一些工作示例。 使用.outerHTML()获取HTMLString 获取第一个元素HTML及其在匹配元素集中的内容。 var html = $('div').outerHTML(); 此方法使用浏览器的externalHTML属性，该属性可用于大多数流行的浏览器。 如果该属性不可用，则使用浏览器的cloneNode或jQuery的克隆来克隆该元素，并将其附加到一个临时Node然后从那里获取inne
jQuery自带方法/函数来获取outerHTML属性
weixin_39885843的博客
05-08 1500
// 原生DOM获取outerHTML alert(document.getElementById('lz66303').outerHTML); // 原生DOM设置outerHTML document.getElementById('lz66303').outerHTML = '<textarea id="lz66303"><hr>原生DOM设置outerHTML...
jquery实现outerHTML
一万亿
11-08 2321
jquery实现outerHTML(2011-08-23 11:44:51)     jQuery.fn.outerHTML = function(s) {     return (s) ? this.before(s).remove() : jQuery("<p>").append(this.eq(0).clone()).html();     } $('#invok
如何用 Jquery实现OuterHtml
weixin_34236497的博客
05-14 187
 $(this).get(0) 或者$(this).prop('outerHTML')
jquery 获取outhtml
hw1287789687的专栏
04-18 1065
jquery 如何获取outHTML 呢? 方式一: var outer_html = $('selector')[0].outerHTML ; console.log(outer_html);   方式二: outer_html = $('selector').clone().wrap('&lt;p&gt;').parent().html();  参考:http://aghosh...
jquery 获取 outerHtml
weixin_34204722的博客
05-04 156
在开发过程中，jQuery.html() 是获取当前节点下的html代码，并不包括当前节点本身的代码，然后我们有时候确须要。找遍jQuery api文档也没有不论什么方法能够拿到。 看到有的人通过parent().html()。假设当前元素没有兄弟元素还行，假设有那即可不通了。后台实验发现有一个jQuery的一个方法能够解决，并且很简便，例如以下： jQuery.prop("out...
jQuery：外部html（）[重复]
xfxf996的博客
06-24 493
Possible Duplicate: 可能重复： Get selected element's outer HTML 获取所选元素的外部HTML imagine what we hav
firefox支持outerHTML
12-18 465
 if(typeof(HTMLElement)!="undefined" && !window.opera) ...{     HTMLElement.prototype.__defineGetter__("outerHTML",function()     ...{         var a=this.attributes, str="        if(a[i].specified)
js的outerHTML 与jquery的prop()的用法
猎人在吃肉
09-14 4114
var xhtml = document.getElementById("__tip__script").outerHTML; var xhtml = $("#__tip__script")[0].outerHTML; var xhtml = $("#__tip__script").prop("outerHTML"); 上面三者的取值完全相同
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值