Javascript 为什么.append（）会把我的<；选项>；元素？

我对此代码有问题：

$(function(){
    function typeHTML() {
                var types = ['text', 'image', 'select'];
                var result = '<select>';
                for (var i = 0; i < types.length; i++) {
                    result += '<option value="' + types[i] + '">' + types[i] + '</option>';
                }
                result += '</select>';
                return result;
            }
for (var i = 0; i < 5; i++) {
                            $('#my-table').append('<tr><td>' + i + '</td><td><input type="text" value="' + i + '"/></td><td>' + typeHTML() + '</td><td><input type="text"/></td><td><input type="text"/>,<input type="text"/></td></tr>');
}
});

$（函数（）{
函数typeHTML（）{
变量类型=[“文本”、“图像”、“选择”]；
var结果=“”；
对于（变量i=0；i

请参见此处的JSFIDLE：

您可以看到，typeHTML（）是一个函数，它构建了一个元素，其中类型[i]作为每个选项的内部文本。但当我附加它时，HTML显示为：

<select>
    <option value="text"></option>
    text
    <option value="image"></option>
    image
    <option value="select"></option>
    select
</select>

文本
形象
选择

---

其中，应该是选项内部文本的

类型[i]

被移到选项外部。为什么会这样？当我记录要追加的HTML时，它看起来是正确的，所以这个问题似乎发生在

append（）

调用本身中。我使用的是jQuery 1.9.1。

您关闭该选项两次：

result += '<option value="' + types[i] + '"/>' + types[i] + '</option>';

result+=''+类型[i]+''；

因此，将此更改为

result += '<option value="' + types[i] + '">' + types[i] + '</option>';

result+=''+类型[i]+''；

正因为如此，“/>”（小提琴中的第6行）您正在自动关闭元素。这不是有效的HTML。@MilindantWar问题是为什么它会这样结束。@MilindantWar，请阅读question@Yoshi是对的：啊，谁把刀子放在那里的？=）谢谢！