outerHTML

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>

posted @ 2016-12-27 14:21  最爱小虾  阅读(1610)  评论(0)  编辑  收藏  举报