Javascript jquery before（）有问题吗？

我有一个页面，你可以点击一个链接，上面写着“添加关键字”，然后会出现一个输入，你可以输入关键字，然后将其转换为模糊或“返回”键上的span标记。然而，我一直在添加它以允许“自动完成”功能，所以我尝试插入一个

<ul></ul> 

在我输入之后，为了在列表中做一个.load

我拥有的相关代码是：

var addKeywordId = 0;
$('a.add_keyword').live('click', function(){
    $(this).before('<input type="text" class="add_keyword" id="addKeyword'+addKeywordId+'" /><ul><li>hi</li></ul>');
    $('.add_keyword').focus();
    addKeywordId++;
});

var addKeywordId=0；
$（'a.add_关键字'）.live（'click'，function（））{
美元（本）。之前（“
嗨
”）；
$（'.add_关键字'）.focus（）；
addKeywordId++；
});

问题是，我的HTML结构最终看起来是这样的：

<ul><li>hi</li></ul>
<a class="add_keyword">+ add keyword</a>
<input id="addKeyword0" class="add_keyword" type="text />

你好

+添加关键字
你好

+添加关键字

有人知道为什么我的HTML是按我指定的顺序添加的吗

谢谢

---

编辑：这在Google Chrome中似乎可以正常工作，但在Mozilla Firefox中却不行（

这可能是因为Firefox对代码进行了奇怪的重新组合，即使在出现错误的情况下也会尝试显示内容。我看到过这样的情况：我错过了一个结束div，即发疯了（应该是这样），Firefox看起来很好，因为它忽略了你错过了添加结束div和猜测

你可以尝试一个两阶段的方法。我会给ul标签添加一个id，然后在它前面添加输入

$(this).before('<ul id="ulid"><li>hi</li></ul>');
$('#ulid').before('<input type="text" class="add_keyword" id="addKeyword'+addKeywordId+'" />');

$（this）.before（'ul id=“ulid”>
hi
'）；
$（'#ulid'）。在（''）之前；

哈欣快乐

---

_wryteowl

我不知道为什么它被无序添加，但如果是这样，为什么不交换这两个元素来实现您想要实现的目标呢？

$（这是）。在（“
hi
”）之前

似乎在这里按预期工作：嗯，你说得对，mblase75..它在那里工作得很好…我试图复制我的整个javascript和东西，但仍然无法复制问题…我甚至不知道从哪里开始调试这个…如果你改用这个，会发生同样的事情吗？$（“

• ”）.insertBefore（$（这个））；是的，我已经尝试了insertBefore（）和before（）：（这两个阶段的工作非常成功。我非常专注于找出问题所在，我没有想到尝试其他方法。非常感谢！！

  $(this).before('<ul id="ulid"><li>hi</li></ul>');
  $('#ulid').before('<input type="text" class="add_keyword" id="addKeyword'+addKeywordId+'" />');