1，获取html结构：当前节点下的代码：

jQuery.html() 是获取当前节点下的html代码，并不包含当前节点本身的代码；

2，jQuery.prop("outerHTML")：包含当前节点本身的代码：

console.log($("#a").prop("outerHTML"));

然而我们有时候的确需要，可以通过jQuery.prop("outerHTML")的方式设置。

3，innerHTML:

从对象的起始位置到终点位置的全部内容，不包括html标签；

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<ul id="a">

    <li>1</li>

    <li>就放多了几分</li>

    <li>登录</li>

</ul>

<ul id="b"></ul>

</body>

</html>

<script type="text/javascript">

    var a = document.getElementById("a");

    console.log(a.innerHTML);

</script>

4， outerHTML:

除了包含innerHTML的全部内容外，还包含对象标签本身。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<ul id="a">

    <li>1</li>

    <li>就放多了几分</li>

    <li>登录</li>

</ul>

<ul id="b"></ul>

</body>

</html>

<script type="text/javascript" src="jquery-1.9.1.min.js"></script>

<script type="text/javascript">

    $(function () {

        var a = $("#a li");

        var text=[];

        for(var i=0;i<a.length;i++){

            //JavaScript 中大括号表示创建对象。

            //var obj = {name:"jacky" };

            //obj.name

            var obj = {div:a[i].outerHTML};

            text.push(obj);

        }

        var str = "";

        $.each(text,function (i,v) {

            str += v.div;

        });

        console.log(str);

        $("#b").html(str);

    })

</script>

outerHTML的更多相关文章

  1. 【JavaScript】innerHTML、innerText和outerHTML的用法区别

    用法: <div id="test">   <span style="color:red">test1</span> tes ...

  2. innerHTML,outerHTML,innerText,outerText区别以及insertAdjacentHTML()方法

    在需要给文档插入大量的新的HTML标记的情况下,通过多次DOM操作先创建节点再指定它们之间的关系会非常麻烦而且效率不高,相对而言插入标记的方法会更加简单,速度也更快. 插入标记中有这四个属性inner ...

  3. innerHTML、innerText、outerHTML、outerText的区别

    我们在用JS/JQ 获取或设置元素内容的时候,通常是获取或设置指定元素之间的内容 <script> //JS document.getElementById('test').innerHT ...

  4. jquery获取所选元素的outerHTML

    大家都知道原生js可以获取匹配元素的内部html和外部html,内部是innerHTML,外部是outerHTML,原生js的dom对象是存在这两个属性的. 如果用jQuery如何获取匹配元素(包括自 ...

  5. 【jQuery 使用】 利用jQuery.prop("outerHTML")获取包含自身在内的HTML元素的HTML代码

    jQuery.html() 是获取当前节点下的html代码,并不包含当前节点本身的代码,然而我们有时候的确需要,可以通过jQuery.prop("outerHTML")的方式设置. ...

  6. innerHTML和outerHTML有什么区别

    一.区别:1)innerHTML: 从对象的起始位置到终止位置的全部内容,不包括Html标签.2)outerHTML: 除了包含innerHTML的全部内容外, 还包含对象标签本身. 二.例子1: & ...

  7. (转)innerHTML、innerText和outerHTML、outerText的区别

    原文:http://walsh.iteye.com/blog/261966 innerHTML.innerText和outerHTML.outerText的区别          博客分类: CSS/ ...

  8. innerHTML/outerHTML; innerText/outerText; textContent

    innerHTML v.s. outerHTML Element.innerHTML Reference: https://developer.mozilla.org/en-US/docs/Web/A ...

  9. javascript innerHTML、outerHTML、innerText、outerText的区别

    1.功能讲解: innerHTML 设置或获取位于对象起始和结束标签内的 HTML outerHTML 设置或获取对象及其内容的 HTML 形式 innerText 设置或获取位于对象起始和结束标签内 ...

随机推荐

  1. 【Codeforces720D】Slalom 线段树 + 扫描线 （优化DP）

    D. Slalom time limit per test:2 seconds memory limit per test:256 megabytes input:standard input out ...

  2. BZOJ3631: [JLOI2014]松鼠的新家

    传送门 树上的差分优化,很简单的一道题,应该属于NOIP2015TGD2T3的子问题. //BZOJ 3631 //by Cydiater //2016.10.25 #include <iost ...

  3. HDU 5167(map + 暴力)

    题意:给出一个数n,问n能否是斐波那契数列中数的乘积 先刷选 斐波那契数列,然后就枚举 #include <cstdio> #include <cstring> #includ ...

  4. 使用 Eclipse 调试 Java 程序的 10 个技巧

    你应该看过一些如<关于调试的N件事>这类很流行的帖子 .假设我每天花费1小时在调试我的应用程序上的话,那累积起来的话也是很大量的时间.由于这个原因,用这些时间来重视并了解所有使我们调试更方 ...

  5. Socket异步通讯

    1.可以通过多线程来解决(一会补上) 2.Socket在tcp/udp两种通信协议下的异步通信: 基于TCP的异步通信: BeginAccept方法和endeaccept方法 包含在System.Ne ...

  6. MySQL查询优化之explain的深入解析

    在分析查询性能时,考虑EXPLAIN关键字同样很管用.EXPLAIN关键字一般放在SELECT查询语句的前面,用于描述MySQL如何执行查询操作.以及MySQL成功返回结果集需要执行的行数.expla ...

  7. win7使用iis并搭建 图片服务器

    1.打开控制面板 2.程序-卸载程序 3.点击左边的 打开或关闭windows功能 4.如下图所示,找到internet信息服务勾选.顺便把FTP服务器也全部勾选了,后面会用到 5.进入 控制面板 – ...

  8. jquery ajax beforeSend 提交等待问题

    需要使用异步加载async : true 否则不会出现等待效果 $.ajax({ url : $('#form').attr("action"), data: $('#form') ...

  9. linux集群时钟问题

    一.ntpd与ntpdate的区别: 摘自:ntpd与ntpdate的区别 - 百事乐 - 博客园  http://www.cnblogs.com/liuyou/archive/2012/07/29/ ...

  10. [UML]UML系列——用例图Use Case

    用例图的概念 用例图是描述用例.参与者以及它们之间关系的图. 用例图的作用 用例图是从用户的角度来描述对信息系统的需求,分析产品的功能和行为. 用例图定义和描述了系统的外部可见行为,是分析.设计直至组 ...