时间戳

首页 > 解决方案 > 如何在另一个元素之后附加一个元素？

jquery - 如何在另一个元素之后附加一个元素？

问题描述

<div>
   <label for="form_username" class="required">Username</label>
   <input type="text" id="form_username" name="form[username]" required="required" class="form-control">
</div>

我尝试将一个元素附加到名称为“form [username]：

$( "<p>Test</p>" ).insertAfter('input[name=form[username]]');

但它不起作用。什么都没发生。

我期待这个结果：

<div>
   <label for="form_username" class="required">Username</label>
   <input type="text" id="form_username" name="form[username]" required="required" class="form-control">
   <p>Test</p>
</div>

标签： jqueryappendinsertafter

解决方案

由于您的输入标签有一个 id form_username，您不必再将[name]属性用作选择器。

$( "<p>" ).text("Test").insertAfter('#form_username');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
   <label for="form_username" class="required">Username</label>
   <input type="text" id="form_username" name="form[username]" required="required" class="form-control">
</div>

或者，如果您只有 1 个输入标签，您可以尝试：

$( "<p>" ).text("Test").insertAfter('input');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
   <label for="form_username" class="required">Username</label>
   <input type="text" id="form_username" name="form[username]" required="required" class="form-control">
</div>

或者，如果您想使用 attribute name，您可以将值重命名form[username]为form_username，如下所示：

$( "<p>" ).text("Test").insertAfter('[name=form_username]');
$( "<p>" ).text("Test").insertAfter('input[name=form_username]');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
   <label for="form_username" class="required">Username</label>
   <input type="text" id="form_username" name="form_username" required="required" class="form-control">
</div>

如果您不想重命名name属性值，可以尝试：

$( "<p>" ).text("Test").insertAfter('input[name*="username"]');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
   <label for="form_username" class="required">Username</label>
   <input type="text" id="form_username" name="form[username]" required="required" class="form-control">
</div>

推荐阅读