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. 【Beta】第四次任务发布

    PM 日常管理&dev版宣传(周日开始). 后端 #99 服务发布 验收条件:使dev版能在www.buaaphylab.com下运行. 前端 #87 登录后能够查看与下载用户收藏的报告.生成 ...

  2. Java开发11个过不去的梗

    现在随着编程的普及,作为java程序猿开发的过程逐渐的受到领导的重视,无论自己的经理是能看懂,还是不能看懂,一些事项必须注意起来,不要让自己将来处于不尴不尬的境地,当然这样也方便你我他 1.不在属性文 ...

  3. 深入理解javascript原型和闭包（18）——补充：上下文环境和作用域的关系

    本系列用了大量的篇幅讲解了上下文环境和作用域,有些人反映这两个是一回儿事.本文就用一个小例子来说明一下,作用域和上下文环境绝对不是一回事儿. 再说明之前,咱们先用简单的语言来概括一下这两个的区别. 0 ...

  4. MRDS学习一——Hello World

    第一步:从左边的Basic Activities中把Data这个元件拖到Diagram中,把Data的类别改为string,中间填入Hello World. 第二步:接着把这个资料输出到一个Servi ...

  5. JavaScript - 对象

    1.对象(Object)或实例(instance):在JavaScript中,对象则是数据与程序代码的组合,它可以是整个应用程序或整个应用程序的一部分. 2.属性(property)或字段(filed ...

  6. silverlight_容器

    Canvas絕對佈局 定位Canvas.Top.Canvas.Left ZIndex屬性 若制定2個控制項重疊,那麼後聲明控制項會覆蓋先聲明的控制項.此時可以使用Canvas.ZIndex屬性來改變它 ...

  7. JS跨域（ajax跨域、iframe跨域）解决方法及原理详解（jsonp）

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

  8. PHP图像裁剪为任意大小的图像，图像不变形，不留下空白

    <?php /** * 说明:函数功能是把一个图像裁剪为任意大小的图像,图像不变形 * 参数说明:输入 需要处理图片的 文件名,生成新图片的保存文件名,生成新图片的宽,生成新图片的高 */ fu ...

  9. sql语句，多个表之间，通过相同内容字段的联合查询

    1 , select j.id,         jt.Name,        j.ApproveType ,         j.ProductCode,         j.CustomerCo ...

  10. jquery写简单的div切换

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...