Question

我在点击链接时尝试添加字段集。

我希望这个新元素在我的范围之前，因为此时元素会在之后添加。

<fieldset id="fieldsetOptions">
 <legend>Options</legend>
 <span>Add an option
   <a onclick="addOption()" href="javascript:return false;">
    <img src="./images/icons/add.png">
   </a>
 </span>
 <fieldset><!--this is the new fieldset, but not at the good place--></fieldset>
</fieldset>

所以，你理解：好的结果应该是这个

<fieldset id="fieldsetOptions">
 <legend>Options</legend>
 <fieldset><!--this is the new fieldset, at the good place--></fieldset>
 <span>Add an option
   <a onclick="addOption()" href="javascript:return false;">
    <img src="./images/icons/add.png">
   </a>
 </span>     
</fieldset>

要添加新的字段集，我这样做：

<script type="text/javascript">
    function addOption(){
     $("#fieldsetOptions").append("<fieldset></fieldset>");
    }
</script>

是否可以添加我们想要的地方？

Answer 1

$("#fieldsetOptions legend").after("<fieldset></fieldset>");

这应该可以解决问题。它使用after在legend的{{1}}子项之后插入新元素。

Answer 2

prepend也是一个函数，你有前后方法。如果你想要它在元素之间，prepend和append都不会起作用，之前和之后都可以。我不会使用onclick，但请使用：

$("#fieldsetOptions > span > a").click(function() {
    $(this).closest('span').before("<fieldset></fieldset>");
});

在ready-function中（给锚点一个特定的类会更好）。

Answer 3

这将在跨度之前插入新元素，但如果您计划将来有更多跨度，则应至少给出一个类，这样您就可以只定位所需的跨度。

<script type="text/javascript">
    function addOption(){
     $("#fieldsetOptions > span").before("<fieldset></fieldset>");
    }
</script>

http://api.jquery.com/before/

如何使用.append（）和appendTo（）添加我们想要的元素？

3 个答案: