jquery - jquery append() 不写结束标签

Question

我在 Google Chrome 中使用 jquery append 方法时遇到了一个奇怪的问题，当元素为空时它不会写入结束标记，但如果元素包含字符则会写入结束标记。

如果我使用此代码：

$('#workZone .canvas').each(function(i) {
        $(this).append('<canvas id="test"></canvas>');
    });
}

我在标记中得到了这个：

<canvas id="test">

如果我使用此代码：

$('#workZone .canvas').each(function(i) {
        $(this).append('<canvas id="test">i</canvas>');
    });
}

我得到了我期望在标记中得到的东西：

<canvas id="test">i</canvas>

显然，我想要结束标签，但不必包含一次性字符。到底是怎么回事？

这是关于 jsfiddle 的测试用例：http: //jsfiddle.net/YSDnk/

谢谢！

蒂姆

score 1 · Accepted Answer

尝试这个：

$(this).append('<canvas id="test"><!-- //comment --> </canvas>');

您应该在空白处放置一个 html 注释。这样结束标签就会显示出来。

score 1 · Accepted Answer

这与之前发布的解决方案相同，但标签之间有一个空格，以防评论无法解决。

$(this).append('<canvas id="test">&nbsp</canvas>');

score 1 · Accepted Answer

不确定您是如何验证这一点的，但您会得到一个带有初始代码的完整标签。当我查看 Inspector 时，我看到了您所看到的，但如果在控制台中运行它：

console.log($("#workZone .canvas").html())

在打印输出中，您将看到完整的 HTML 有效且已正确关闭。

score 0 · Accepted Answer

如果你使用：

$(this).append('<canvas id="test"/>');

这应该和你所拥有的一样，所以我不知道它为什么会起作用，我刚刚学会了测试所有的怪癖。

4 回答 4