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. Python【第三章】：python 面向对象 （new)

    面向对象是一种编程方式,此编程方式的实现是基于对 类 和 对象 的使用 类 是一个模板,模板中包装了多个“函数”供使用(可以讲多函数中公用的变量封装到对象中) 对象,根据模板创建的实例(即:对象),实 ...

  2. html5离线应用和缓存

    1 localstorage和sessionstorage sessionStrage: session即会话的意思,在这里的session是指用户浏览某个网站时,从进入网站到关闭网站这个时间段,se ...

  3. 有米实习-用到的shell脚本和Python脚本记录

    Shell:LOG_DATE=`date -d "1 day ago" +%Y-%m-%d` #以指定格式设置一天前的年份月份日期 aws s3 ls $LAST5_BASE_PA ...

  4. 调试使用windows堆程序遇到的问题

    今天测试我的api hook demo,中间有个单向链表,我对他进行遍历的时候,通过判断链表当前元素是否为NULL(即0)来进行循环控制,在cmd下正常运行,输出的是:,struct addr is ...

  5. java List 和Map的使用

    一.MAP package net.xsoftlab.baike; import java.util.HashMap;import java.util.Iterator;import java.uti ...

  6. web开发——写一个简单的表格导出操作

    一.前台页面: 主要是一个按钮和一个表格,表格有显示数据,按钮负责将表格中的数据选择性地导出.除此外,可以附加一个小窗口和进度条,用于显示下载进度. 1. 按钮:<a href="ja ...

  7. 谷歌地图地理解析和反解析geocode.geocoder详解

    地址解析就是将地址(如:贵州省贵阳市)转换为地理坐标(如经度:106.71,纬度:26.57)的过程. 地理反解析和上面的过程相反是将地理坐标(如纬度:26.57,经度:106.71)转换为地址(中国 ...

  8. [Nhibernate]二级缓存（二）

    目录 写在前面 文档与系列文章 更新数据 二级缓存管理 总结 写在前面 本篇文章也算nhibernate入门系列的结尾了,在总结nhibernate系列的过程中,遇到了很多问题,学习的过程也是解决bu ...

  9. CSS百分比定义高度的冷知识

    当我们给块级元素设置响应式高度的时候,例如给div设置height=50%,往往没能看到效果. 原因是百分比的大小是相对其父级元素宽高的大小,如最外层元素设置的百分比是对应屏幕而言的. 需要了解的是对 ...

  10. 大熊君学习html5系列之------WebStorage（客户端轻量级存储方案）

    一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...