innerHTML vs jQuery .html() 有什么分别?-问答-阿里云开发者社区-阿里云

开发者社区> 小旋风柴进> 正文

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

2016-05-27 08:43:29 1453 1

根据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()得出相同结果
取消 提交回答
全部回答(1)
  • 小旋风柴进
    2019-07-17 19:16:56

    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 );
        }
    0 0
相关问答

11

回答

在阿里云上安装和运行Node.js全功略

ycwong 2013-09-18 15:17:30 64016浏览量 回答数 11

40

回答

[@徐雷frank][¥20]什么是JAVA的平台无关性

大河人家 2018-10-29 23:55:20 144256浏览量 回答数 40

19

回答

【分享】如何提高网站的打开速度?

enj0y 2012-11-17 14:35:22 56719浏览量 回答数 19

145

回答

【新手入门】云服务器linux使用手册

fanyue88888 2012-11-26 17:14:18 157063浏览量 回答数 145

28

回答

钉钉开放平台“常见问题常见问题常见问题“重要请关注

竹梅 2015-12-03 00:39:14 92857浏览量 回答数 28

22

回答

爬虫数据管理【问答合集】

我是管理员 2018-08-10 16:37:41 146766浏览量 回答数 22

31

回答

[@倚贤][¥20]刚学完html/css/js的新手学习servlet、jsp需要注意哪些问题?

弗洛伊德6 2018-10-27 21:52:43 145597浏览量 回答数 31

23

回答

【云服务器分享】网站访问速度快才是硬道理

dreamdoo 2012-10-15 10:15:02 85180浏览量 回答数 23

13

回答

【云服务器分享】如何节省网站流量

dreamdoo 2012-10-15 10:36:09 80109浏览量 回答数 13

14

回答

对象存储oss【问答合集】

我是管理员 2018-08-03 14:54:02 67359浏览量 回答数 14
2728
文章
6591
问答
推荐问答
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载