忽略 标记的JQuery .append

我有以下HTML：

  Hide or show labels? Show Label Hide Label   

我想在运行时将到父div，ala：

  
 
 $("#show-label").html("") .append("Hide or show labels?") .append("Show Label") .append("Hide Label") .append(""); 

对于我不知道的resons，结束标记不会被注入页面。

我已经尝试过上面的代码以及类似的东西：

 .append("Hide Label") 

是否有一些关于将这些元素“批处理”为单个.append的要求？ 我想知道这种方法在加载到DOM时看起来是不是很好，所以它被忽略了……

谢谢！

Answer 1

试试这个：

 $("#show-label").append(function() { return $("") .append("Hide or show labels?") .append("Show Label") .append("Hide Label"); }); 

Answer 2

append()只将一个元素附加到另一个元素。 您需要做的是创建一个有效的选择标记。 然后，您可以将选项附加到该选项。 请参阅文档 。

 $("#show-label").html("") $('#show-label select').append("Hide or show labels?") .append("Show Label") .append("Hide Label"); 

Answer 3

改为：

 var $select = $(""); $("#show-label").html($select); $select.append("Hide or show labels?") .append("Show Label") .append("Hide Label"); 

如果你因为某种原因需要追加。 否则，这样做是为了获得更好的浏览器效率（一次更改为实际dom而不是多次）：

 var $select = $("") .append("Hide or show labels?") .append("Show Label") .append("Hide Label"); $("#show-label").html($select); 

Answer 4

这一行：

 $("#show-label").html("") 

设置#show-label的html，并返回表示#show-label的jQuery对象。 第二部分在那里很重要，因为它意味着你的下一行，

 .append("Hide or show labels?") 

也会附加到#show-label ，这不是你想要的。 试试这个：

 $("#show-label").empty().append( $('') .append("Hide or show labels?") .append("Show Label") .append("Hide Label") ); 

Answer 5

您可以简单地附加完成的选择，然后向其添加选项：

 $("#show-label").html("Hide or show labels?") .append("Show Label") .append("Hide Label");