Jquery append() 不起作用答案

【问题标题】：Jquery append() isn't workingJquery append() 不起作用
【发布时间】：2009-06-08 13:04:45
【问题描述】：

我有这个<ul>

<ul id="select_opts" class="bullet-list" style="margin-left:15px;"></ul>

这个 javascript 代码旨在通过 JSON 对象并添加选项到 UL：

$.each(q.opts, function(i,o)
{                        
    var str='';
    str+="<li id='li_" + i + "'><input type='text' id='opt_" + i + "' value='" + o.option + "'>";
    str+=" (<a href='javascript:delOpt(" + i + ");'>Delete</a>) </li>";
    $("#select_opts").append(str);

});

如果我执行 console.log()，我可以看到循环正在工作。如果我这样做：

console.log($("#select_opts").html());

它显示 HTML 正在按预期更新。但是在浏览器窗口中，它显示 UL 为空！

我做错了什么？

【问题讨论】：

标签： javascript jquery

【解决方案1】：

$("select_opts").append(str);

应该是

$("#select_opts").append(str);

【讨论】：

【解决方案2】：

您是通过 id 引用对象，所以您错过了 #

$.each(q.opts, function(i,o)
{                        
    var str='';
    str+="<li id='li_" + i + "'><input type='text' id='opt_" + i + "' value='" + o.option + "'>";
    str+=" (<a href='javascript:delOpt(" + i + ");'>Delete</a>) </li>";
    $("#select_opts").append(str);
   //  ^
}

【讨论】：

如果它不尝试检查循环是否实际执行？尝试发出警报（“这有效”）；里面。

【解决方案3】：

我真的看不出有什么问题，但试试这个，看看它是否有效......

$(str).appendTo("#select_opts");

两者都应该工作。

【讨论】：

【解决方案4】：

这是一个错字吗？：

$("select_opts").append(str);

你的意思是？：

$("#select_opts").append(str);

更新：

试试这个：

$.each(q.opts, function(i, o) {
    var li = $('<li>').attr('id', 'li_' + i);
    var in = $('<input>').attr('type', 'text').attr('id', 'opt_' + i).val(o.option);
    var aa = $('<a>').attr('href', 'javascript:delOpt(' + i + ');').text('Delete');
    li.append(in).append(aa)
    $("#select_opts").append(li);
});

【讨论】：

【解决方案5】：

标签 Input 应该关闭 - 如果不关闭，当在 Internet Explorer 上的 append() 中使用无效的 html 时，div 不会放入 DOM 树中，因此您以后无法使用 jQuery 访问它。

【讨论】：

【解决方案6】：

我想input 需要适当地自我关闭。

【讨论】：

仅当它是 xhtml 时，但即使那样，这也不应该影响 javascript。

【解决方案7】：

我发现了这个错误，当我点击某个按钮时，另一部分代码正在清空<ul>。

【讨论】：