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/

谢谢！

添

Answer 1

试试这个：

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

您应该在空格中添加html注释。 这样结束标记将显示。

Answer 2

不确定您是如何验证这一点的，但是您的初始代码是完整的标记。当我看到Inspector时，我看到你看到了什么，但如果在控制台中运行它：

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

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

Answer 3

这是前面发布的相同解决方案，但标签之间有空格，以防注释无法解决。

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

Answer 4

如果您使用以下内容：

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

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