Question

我正在尝试使用jQuery在input字段之后添加一些HTML，但它不起作用，我不明白为什么。

<input type="text" value="secret password" maxlength="255" id="ripo" title="Password" class="ms-long ms-spellcheck-true">

$(document).ready(function() {
  jQuery("input[title='Password']").append('<P>test</P>');
});

Answer 1

append()用于在元素中添加内容，但表单输入不包含任何内容。通常，您可以使用val()来设置其值。

然而，要实现您的需求，请使用after()方法将内容插入到所选元素之后的DOM中：

$(function() {
  $("#ripo").after('<P>test</P>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" value="secret password" maxlength="255" id="ripo" title="Password" class="ms-long ms-spellcheck-true">

Answer 2

您必须使用.after()方法。

append方法将内容插入匹配元素集中每个元素的末尾。

after方法在匹配元素集中的每个元素之后插入内容。

$(document).ready(function() { jQuery("input[title='Password']").after('<p>test</p>'); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" value="secret password" maxlength="255" id="ripo" title="Password" class="ms-long ms-spellcheck-true">

此外，您可以通过以下方式使用insertAfter方法。

$(document).ready(function() { $('<p>test</p>').insertAfter($("input[title='Password']")); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" value="secret password" maxlength="255" id="ripo" title="Password" class="ms-long ms-spellcheck-true">

Answer 3

您无法将HTML附加到输入中。但是你可以这样做（如果你想实际设置值）：

$(document).ready(function() {
  jQuery("input[title='Password']").val('test');
});

虽然这不能回答编辑的问题，但其他答案会在输入后附加一个元素。

使用jQuery在输入元素后添加HTML

3 个答案: