精华内容
下载资源
问答
  • 本文实例讲述了jquery获取及设置outerhtml的方法。分享给大家供大家参考。具体分析如下: 在开发过程中,jQuery.html() 是获取当前节点下的html代码,并不包含当前节点本身的代码,然而我们有时候的确需要,可以通过...
  • innerHTML或是outerHTML 比如说: 代码如下:var crtDIV = document.getElementById(‘divIDName’); if (crtDIV) { crtDIV[removed].removeChild(crtDIV); crtDIV.outerHTML = “”; } 就有可能发现,整个界面都是...
  • 它还介绍了对.outerHTML(function)的支持。 有关更多详细信息,请参见版本说明。 检查“示例”文件夹中的一些工作示例。 使用.outerHTML()获取HTMLString 获取第一个元素HTML及其在匹配元素集中的内容。 var ...
  • 在开发过程中,jQuery.html() 是获取当前节点下的html代码,并不...jQuery.prop(“outerHTML”); 代码如下: ”test”><p>hello,你好!</p></div> [removed] $(“.test”).prop(“outerHTML”); [removed] 输出结果
  • 随着科技的日新月异,各种浏览器层出不穷,最近的项目要求对同时支持IE和FireFox等各种浏览器,为此深受其苦,尤其是对于我这个习惯了使用诸如:"event.srcElement"、"outerHTML"、"parentElement"的人来说。...
  • 主要介绍了javascript innerHTML、outerHTML、innerText、outerText的区别,本文讲解了它们的功能、使用实例、和不同之处,需要的朋友可以参考下
  • <p><div id=”div” xss=removed>这是一个层</span></div> <...input name=”outerHTML” value=”outerHTML” type=”button” OnClick=”alert(div.outerHTML);”> <input name=”innerTe
  • 主要介绍了Firefox中使用outerHTML的2种解决方法,需要的朋友可以参考下
  • NULL 博文链接:https://snandy.iteye.com/blog/717934
  • html js innerHTML outerHTML innerText outerText 等的区别及实例汇总
  • 减少DOM数可以加快浏览器的在解析页面过程中DOM Tree和render tree的构建,从而提高页面性能。... 要把TextArea 中暂存的HTML内容添加到页面中,使用元素的outerHTML属性是最... outerHTML 就是获取或设置包含元素标签本身
  • 原生JS DOM里有一个内置属性 outerHTML,...$(".test").prop("outerHTML"); jquery设置outerhtml $('.test').prop('outerHTML', '<div>'); https://blog.csdn.net/yh12346789/article/details/79781204 ...
    原生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的方式,让其都是唯一的。

    展开全文
  • 为什么要总结innerHTML和outerHTML的区别呢,主要是在看vue.js官方文档时,看到生命周期时 )] 原生的方法有点忘了,所以要重拾起来。 示例如下: <!DOCTYPE html> <html lang="en"> <head> <...

    为什么要总结innerHTML和outerHTML的区别呢,主要是在看vue.js官方文档时,看到生命周期时

    原生的方法有点忘了,所以要重拾起来。

    示例如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>outerHtml</title>
    </head>
    <body>
        <div id="app">
            <p>努力着</p>
            <p>从不放弃</p>
        </div>
        <script>
            const app = document.querySelector('#app');
            console.log(app.innerHTML); 
            // 会打印出  
            // <p>努力着</p>
            // <p>从不放弃</p>
            
            console.log(app.outerHTML);
            // 会打印出  
            // <div id="app">
            //   <p>努力着</p>
            //   <p>从不放弃</p>
            // </div>
        </script>
    </body>
    </html>
    

    从上面的例子我们可以得出这样的方案

    1.innerHTML 设置或获取位于对象内的HTML,不包括对象自己的标签

    2.outerHTML设置或获取对象及其内容的HTML形式,包括对象自己的标签

    展开全文
  • jquery.outerHtml 一个简单的jQuery插件,用于获取或设置节点的外部HTML,这是IE的元素[以前]专有的outerHTML属性。 获取匹配元素集中第一个节点的外部HTML内容,或设置每个匹配节点的外部HTML内容。 入门 检查以...
  • jquery outerhtml

    2019-10-06 02:02:00
    jquery outerhtml 让 Firefox 支持 outerHTML (使用jQuery1.3)Posted on 2009-06-16 17:43吕霖阅读(627)评论(7)编辑收藏1、今天获取元素的html,而firefox却不支持如下代码...

    让 Firefox 支持 outerHTML (使用jQuery1.3)

    Posted on 2009-06-16 17:43  吕霖 阅读(627)  评论(7)  编辑  收藏 

    1、今天获取元素的html,而firefox却不支持如下代码

    var elemstr = $("#" + name)[0].outerHTML;

    2、看到网上很多文章讨论Firefox如何使用outerHTML,给出的解决方案都颇为复杂。

    如果使用jQuery1.3,则问题变得简单多了!

    使用如下代码,IE和FF均支持!

    var elemstr = $("#" + name).parent().html();

    希望本文能对你有所帮助!

     

    wrong above

     

     

    jQuery: outerHTML

    The outerHTML property (IE only) could sometimes be very handy, especially if you're trying to replace an element entirely. Brandon Aaron has very kindly given us aouterHTML plugin that does half the job as it doesn't support replacements. The following code snippet fills in the blanks:

    jQuery.fn.outerHTML = function(s) {
    return (s)
    this.before(s).remove()
    : jQuery("&lt;p&gt;").append(this.eq(0).clone()).html();
    }

    To get the outerHTML value of an element do this...

    $('#myTag').outerHTML();

    To replace #myTag entirely do this...

    $('#myTag').outerHTML("&lt;p&gt;My brand new #myTag.&lt;/p&gt;");

    Hope this helps someone :)

    Update: There's now a demo page.

    posted on 2010-12-08 12:20  lexus 阅读( ...) 评论( ...) 编辑 收藏

    转载于:https://www.cnblogs.com/lexus/archive/2010/12/08/1900093.html

    展开全文
  • cheerio获取outerHTML

    2019-07-23 15:30:14
    $("......").prop("outerHTML") 例如若要去取id等于fruits的内容 $("#fruits").prop("outerHTML") 但是这在cheerio中行不通。 网上搜索了一圈后基本都是一套翻译完的文档无限转载。。。还是自己动手写了两个...

    cheerio作为node中jquery的替代品,拥有与jquery相似的api,甚至连详细文档的地址都指向api.jquery.com。但是由于执行环境的关系,并没有完全继承jquery中的方法。
    对于这样的页面

    <html>
    	<head></head>
    	<body>
    		<ul id="fruits">
    			<li>1</li>
    			<li>2</li>
    		</ul>
    		<ul id="others">
    			<li>1</li>
    			<li>2</li>
    		</ul>
    	</body>
    </html>
    

    在浏览器中,使用jquery获取所选取对象的包括本身标签的内容时,会用到下面的方法
    $("......").prop("outerHTML")
    例如若要去取id等于fruits的内容
    $("#fruits").prop("outerHTML")

    但是这在cheerio中行不通。
    网上搜索了一圈后基本都是一套翻译完的文档无限转载。。。还是自己动手写了两个方法。

    方法一

    var cheerio = require('cheerio');
    
    const $ = cheerio.load('<html><head></head><body><ul id="fruits"><li>1</li><li>2</li></ul><ul id="others"><li>1</li><li>2</li></ul></body></html>');
    
    console.log(cheerio.load('<div></div>')("div").html($("#fruits")).html());
    

    既然它只能获取内容,那就造一个容器把它包进去再取。就是普通的jquery语法不解释。

    方法二

    改源码
    核心的文件有两个。分别是cheerio包下的manipulation.js

    exports.html = function(str) {
      if (str === undefined) {
        if (!this[0] || !this[0].children) return null;
        return $.html(this[0].children, this.options);
      }
    
      var opts = this.options;
    
      domEach(this, function(i, el) {
        _.forEach(el.children, function(child) {
          child.next = child.prev = child.parent = null;
        });
    
        var content = str.cheerio ? str.clone().get() : evaluate('' + str, opts, false);
    
        updateDOM(content, el);
      });
    
      return this;
    };
    

    还有static.js

    exports.html = function(dom, options) {
    
      // be flexible about parameters, sometimes we call html(),
      // with options as only parameter
      // check dom argument for dom element specific properties
      // assume there is no 'length' or 'type' properties in the options object
      if (Object.prototype.toString.call(dom) === '[object Object]' && !options && !('length' in dom) && !('type' in dom))
      {
        options = dom;
        dom = undefined;
      }
    
      // sometimes $.html() used without preloading html
      // so fallback non existing options to the default ones
      options = _.defaults(flattenOptions(options || {}), this._options, defaultOptions);
    
      return render(this, dom, options);
    };
    

    虽然完全搞不懂nodejs是怎么运行的(纯靠报错和ctrl+f硬找,我自己都意外的是在用断点之前就找到了解决方法),总之,在manipulation.js中添加这段代码

    exports.outerHTML = function(str) {
        return $.html(this[0], this.options);
    }
    

    然后这样调用也是可以的

    var cheerio = require('cheerio');
    
    const $ = cheerio.load('<html><head></head><body><ul id="fruits"><li>1</li><li>2</li></ul><ul id="others"><li>1</li><li>2</li></ul></body></html>');
    
    console.log($("#fruits").outerHTML());
    

    但是,这可能不符合规范,先用方法一凑合着吧。

    展开全文
  • outerHTML

    2011-11-20 22:54:00
    图例分析outerHTML的用法——与innerHTML不同,outerHTML包括整个标签,而不仅限于标签内部的内容。对于一个id为"testdiv"的div来说,outerHTML、innerHTML以及innerTEXT三者的区别可以通过右图展示出来。  ...
  • innerHTML和outerHTML有什么区别

    万次阅读 2019-04-24 15:54:09
    innerHTML和outerHTML有什么区别 一、区别: 1)innerHTML:  从对象的起始位置到终止位置的全部内容,不包括Html标签。 2)outerHTML:  除了包含innerHTML的全部内容外,还包含对象标签本身。 二、例子: <divid=...
  • outerHTML 输出当前标签的本身和标签内的文本内容,如果有子标签,那么子标签本身和标签内的文本内容也将一起输出 outerText 只输出当前标签内的文本内容,如果标签内有子标签,那么也只输出子标签内的文本内容 ...
  • 在研究外协代码的时候,发现很多这一行代码: return domEle.prop('outerHTML'); prop() 方法: 当该方法用于返回属性值时,则返回第一个匹配元素的值。 当该方法用于设置属性值时,则为匹配元素集合设置一个或多...
  • innerHTML和outerHTML区别

    万次阅读 2018-09-16 17:45:04
    var kj=document.getElementById("test").outerHTML; alert(kj); 输出结果: <div id="test"><h5>就是喜欢你</h5></div> 注意: 1.innerHTML 设置或获取位于对象起始和结束标签内的HTML 2....
  • 在Chrome开发者调试工具中,有Copy element和Copy OuterHTML两个选项。从我的体验上面来看,我好像没找到甚么区别,但是我非常想知道他们有甚么区别。 具体操作 挖地三尺也要给它找出来,翻源码 从描述上面来看应该...
  • var kj=document.getElementById("test").outerHTML; alert(kj); 输出结果: <div id="test"><h5>就是喜欢你</h5></div> 注意: 1.innerHTML 设置或获取位于对象起始和结束标签内的HTML 2....
  • <title>innerHTML、outerHTML和innerText、outerHTML的区别</title> <script language="JavaScript" type="text/javascript">  //.innerHTML  function innerHTMLDemo()  {  test_id1.innerHTML="<i><u>...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 18,104
精华内容 7,241
关键字:

outerhtml