开发者社区> 问答> 正文

innerHTML vs jQuery .html() 有什么分别?

根据jQuery官方文件所提及.html()是使用 This method uses the browser's innerHTML property,既然使用的是相同方法,为何结果不一样?

<head>
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/md5.js"></script>
    <script>
    
        var md5 = document.getElementById("md5").value;
        var hash = CryptoJS.MD5(md5);
        
        document.getElementById("showMD5").innerHTML = hash; //能传正确的值
        $("#showMD5").html(hash); //没反应
        
    </script>
</head>
<body>
    <input type="text" id="md5">
    <button id="btn" onclick="chkMd5()">Check MD5</button>
    <div id="showMD5"></div>
</body>

另外jQuery中.text() .html()有什么分别?

console.log($("#showMD5").html()); 
console.log($("#showMD5").text()); //.html() .text()得出相同结果

展开
收起
小旋风柴进 2016-05-27 08:43:29 1880 0
1 条回答
写回答
取消 提交回答
  • jquery-1.11.3中html的实现方式:

            return access( this, function( value ) {
                var elem = this[ 0 ] || {},
                    i = 0,
                    l = this.length;
    
                if ( value === undefined ) {
                    return elem.nodeType === 1 ?
                        elem.innerHTML.replace( rinlinejQuery, "" ) :
                        undefined;
                }
    
                // See if we can take a shortcut and just use innerHTML
                if ( typeof value === "string" && !rnoInnerhtml.test( value ) &&
                    ( support.htmlSerialize || !rnoshimcache.test( value )  ) &&
                    ( support.leadingWhitespace || !rleadingWhitespace.test( value ) ) &&
                    !wrapMap[ (rtagName.exec( value ) || [ "", "" ])[ 1 ].toLowerCase() ] ) {
    
                    value = value.replace( rxhtmlTag, "<$1></$2>" );
    
                    try {
                        for (; i < l; i++ ) {
                            // Remove element nodes and prevent memory leaks
                            elem = this[i] || {};
                            if ( elem.nodeType === 1 ) {
                                jQuery.cleanData( getAll( elem, false ) );
                                elem.innerHTML = value;
                            }
                        }
    
                        elem = 0;
    
                    // If using innerHTML throws an exception, use the fallback method
                    } catch(e) {}
                }
    
                if ( elem ) {
                    this.empty().append( value );
                }
            }, null, value, arguments.length );
        }
    2019-07-17 19:16:56
    赞同 展开评论 打赏
问答分类:
问答标签:
问答地址:
相关产品:
问答排行榜
最热
最新

相关电子书

更多
《零基础HTML入门教程》 立即下载
天猫 HTML5 互动技术实践 立即下载
天猫HTML5互动技术实践 立即下载