jQuery html更新内容

Question

我使用jquery ajax从PHP文件中获取数据。

data = <option>Peter</option><option>Maria</option>

然后我想使用jquery将这些数据放在第一个选项之后

<select>
   <option>Name</option>
</select>

我无法在select上使用html（），因为第一个选项将被删除。我可以使用哪种jquery函数将它们放在第一个之后？

编辑：我不能使用附加，因为然后当我发出另一个请求并且数据是：

data = <option>Michael</option><option>Erik</option>

Peter和Maria仍将在“选择”列表中。我能怎么做？我试图有一个

<div id=addhere></div>

在第一个选项之后，然后使用html（），但是它不起作用。奇怪的。我该如何解决？

Answer 1

将原始选项保存在变量中，并将AJAX响应与原始选项一起附加。

正在运行的演示：

http://jsbin.com/otiro（可通过http://jsbin.com/otiro/edit编辑）

来源：

<select id="name">
  <option>Name</option>
</select>
<script type="text/javascript">
  var nameSelect = $('#name'), originalOptions = nameSelect.children();

  function handleAjaxResponse(response) {
    nameSelect.children().remove().end().append(originalOptions.add(response));
  }

  $.get("getNames.php", handleAjaxResponse);
</script>

Answer 2

编辑：更新后，更改我的回答以回答您的问题...

所以可以说您通过AJAX返回了以下内容：

data = "<option>Michael</option><option>Erik</option>";

然后，您只能更新该数据，并使用html（）

data = "<option>Name</option>" + data;
$("#selectToModify").html(data);

这里是旧答案，仅供参考：

$("#divToAddTo").append(data);

html（）将替换元素的innerHTML。append（）会将任何数据追加到innerHTML的末尾。

Answer 3

我不确定我是否完全理解这个问题，但是请看一下jQuery reference中可用于插入内容的功能。 insertAfter可能是您要寻找的那个。

Answer 4

签出jQuery docs append功能

Answer 5

在添加新选项之前，我使用了jquery remove功能将所有兄弟姐妹都删除到第一个选项中……效果很好... =）