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>』下属医疗机构相关信息";

　　显示结果:

　　　　『*』下属医疗机构相关信息