innerHTML outerHTML innerText

迁移时间--2017年10月31日14:52:59

Author:Marydon

UpdateTime--2017年1月15日20:33:03
innerHTML,outerHTML与innerText
示例：

<div id="test">

    测试<br/>

    <input type="text"/>

    <input type="button"/>

    <div>innerHTML与outerHTML的区别</div>

</div>

　　innerHTML--取的是标签体内的所有内容
　　如：

window.onload = function() {

    document.getElementById("test").innerHTML;

    //显示的所有内容

    /*测试<br/>

    <input type="text"/>

    <input type="button"/>

    <div>innerHTML与outerHTML的区别</div>*/

}

用法：
　　1.取值

var html = document.getElementById("test").innerHTML;

　　2.赋值（覆盖掉原来的内容）

document.getElementById("test").innerHTML = "这里是替换后的内容";

　　如：

document.getElementById("test").innerHTML = "<font color='red'>${model.data.forgid}</font>";

　　3.给当前标签体内添加或追加子标签或内容；

　　如：

document.getElementById("test").innerHTML += "<font color='red'>${model.data.forgid}</font>";

outerHTML--根据标签本身的引用来获取标签自身的html标签（即：标签体本身+标签体里面的内容）

window.onload = function() {

    document.getElementById("test").outerHTML;

    //显示的是该标签体

    /*<div id="test">

            测试<br/>

            <input type="text"/>

            <input type="button"/>

            <div>innerHTML与outerHTML的区别</div>

        </div>*/

}

用法：

　　1.取值

var html = document.getElementById("test").outerHTML;

　　2.给指定元素的后面添加同级元素或内容；

　　如：

document.getElementById("test").outerHTML += "<font color='red'>${model.data.forgid}</font>";

/**

 * 不兼容outerHTML的解决办法

 */

if(!document.body.outerHTML && typeof(HTMLElement) != "undefined") {

    HTMLElement.prototype.__defineGetter__("outerHTML", function() {

        var a = this.attributes,

            str = "<" + this.tagName,

            i = 0;

        for(; i < a.length; i++)

            if(a[i].specified)

                str += " " + a[i].name + '="' + a[i].value + '"';

        if(!this.canHaveChildren)

            return str + " />";

        return str + ">" + this.innerHTML + "</" + this.tagName + ">";

    });

    HTMLElement.prototype.__defineSetter__("outerHTML", function(s) {

        var r = this.ownerDocument.createRange();

        r.setStartBefore(this);

        var df = r.createContextualFragment(s);

        this.parentNode.replaceChild(df, this);

        return s;

    });

    HTMLElement.prototype.__defineGetter__("canHaveChildren", function() {

        return !/^(area|base|basefont|col|frame|hr|img|br|input|isindex|link|meta|param)$/.test(this.tagName.toLowerCase());

    });

}

innerText--取的是标签体内的所有文本内容
　　如：

window.onload = function() {

    document.getElementById("test").innerText;

    //显示所有的文本内容

    /*测试

    innerHTML与innerText的区别*/

}

　　用法：同innerHTML

innerText与innerHTML的区别
　　区别1：
　　　　取值（上面例子）
　　区别2：赋值

$get("FORGNAME_SPAN").innerText= "『<font color=red>" + json.FORGNAME + "</font>』下属医疗机构相关信息";

　　显示结果:

　　　　『<font color=red>中华人民共和国</font>』下属医疗机构相关信息　　

$get("FORGNAME_SPAN").innerHTML= "『<font color=red>" + json.FORGNAME + "</font>』下属医疗机构相关信息";

　　显示结果:

　　　　『中华人民共和国』下属医疗机构相关信息

巴特西

innerHTML outerHTML innerText

最新文章

热门文章