Question

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

Answer 1

由于输入代码的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>

Answer 2

或者，您可以只使用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>

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

2 个答案: