如何使用.append(）和appendTo(）将元素添加到我们想要的位置

How to add elements where we want with .append() and appendTo()?

本文关键字：我们 位置 添加 append 何使用 appendTo 元素      更新时间：2023-09-26

当我点击链接时，我试图添加一个字段集。

我希望这个新元素在我的跨度之前，因为此时此刻，元素是在后面添加的。

<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>

可以添加到我们想要的位置吗？

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

这就行了。它使用after在#fieldsetOptions的legend子元素之后插入新元素。

这将在span之前插入新元素，但如果您计划在未来有更多的span，则应至少为span提供一个类，这样您就可以只针对您想要的span。

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

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

prepend也是一个函数，您有before和after方法。如果你想在元素之间使用它，那么prepend和append都不起作用，after和before都可以。我不会用onclick，但用这个：

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

在ready函数中(给锚点一个特定的类会更好(。

相关文章：