如何在另一个元素之后附加一个元素?

How can I append an alement after another element?

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

因为您的输入标签有一个 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>


或者如果您想使用属性 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>

或者,您可以只使用 jQuery 的 .append() 方法将段落附加到现有页面元素。

$('#content_one').append('<p>Test 1</p>');
$('#content_two').append('<p>Test 2</p>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content_one">
  <label for="form_username" class="required">Username</label>
  <input type="text" id="form_username" name="form[username]" required="required" class="form-control">
</div>

<div id="content_two">
  <label for="form_password" class="required">Password</label>
  <input type="text" id="form_password" name="form[password]" required="required" class="form-control">
</div>