Question

这是基本设置：我们使用JavaScript / jQuery在textareas中添加一些HTML。测试1没有<style>标签，而测试2则没有。

<textarea"><div><style></style><span>Baseline</span></div></textarea>
<textarea id="test1"></textarea>
<textarea id="test2"></textarea>

<script>
    var test1HTML = '<div><span>Test1</span></div>';
    var test2HTML = '<div><style></style><span>Test2</span></div>';

    document.getElementById("test1").innerHTML = test1HTML;
    document.getElementById("test2").innerHTML = test2HTML;
</script>

以上工作正常：所有文本区域都显示HTML代码。

但如果我们使用jQuery的.html函数添加内容，则测试2无法正确显示。它似乎将内容添加为实际元素，而不是文本。

$(document).ready(function(){
    $('#test1').html(test1HTML);
    $('#test2').html(test2HTML); // Causes some kind of problem
});

如果我们将.html替换为.text，那么这两个测试将再次按预期工作。

使用.html测试2会发生什么？为什么添加<style>代码会改变.html添加内容的方式？为什么所有其他方法都能正常工作？

（FWIW - 浏览器为Chrome 39.0.2171.95 m）

Answer 1

jQuery会检查您为.html()，<script>和<style>标记（以及其他几个标记）提供给<link>的值。只有当不包含它们时，它才会继续设置匹配元素的.innerHTML属性。

但是，如果值包含任何这些标记，则jQuery会选择执行$(element).empty().append(content);，它会将文本值（节点）附加为子元素。

这至少应该解释行为的差异。

以下是源代码（v1.11.1）的摘录：

html: function( value ) {
    return access( this, function( value ) {
        var elem = this[ 0 ] || {};
        // ...ommitted
        // See if we can take a shortcut and just use innerHTML
        if ( typeof value === "string" && !rnoInnerhtml.test( value )) //...
            // ...
            elem.innerHTML = value;
            // ...
        }
        // ... else ... 
        this.empty().append( value );
        // .... end if
    }, null, value, arguments.length );
},

rnoInnerhtml正则表达式为：/<(?:script|style|link)/i,

Answer 2

您应该使用.val方法：

$('#test1').val(test2HTML);

如果有样式标记，jQuery的.html函数不能正确地将内容写入textarea

2 个答案: