Question

我试图模仿一个使用jQuery附加元素的Lynda.com示例。这包括添加一个额外的元素，但我无法使其工作。我最终只是将事情简化到最低限度，但我仍然无法使其发挥作用。

<h1>Here are my paragraphs</h1>
<p>This is the first paragraph</p>
<p>This is the second paragraph</p>
<form>
    <input value="(enter text here)"></input>
</form>

我的jQuery代码是：

$(document).ready(function(){
'use strict';
var $group = $("input");
$group.append("<br><p>TEST TEST TEST</p>"); 
});

显然，正如我在这里，这不起作用 - 尽管它与课程中的内容完全一致。有趣的是，如果我用“p”，“h1”或“form”替换“input”，那么“TEST TEST TEST”会按预期附加到这些元素。

我试图在线搜索类似的问题，但一直没有成功。如果有人能解释我在这里不理解的东西，我会非常非常感激。

Answer 1

发生这种情况是因为输入不能包含任何其他html标记。使用div换行输入，并将元素附加到div内。代码示例：

<h1>Here are my paragraphs</h1>
<p>This is the first paragraph</p>
<p>This is the second paragraph</p>
<form>
  <div class="wrapper">
   <input value="(enter text here)">
  </div>
</form>

然后是jquery：

var $group = $(".wrapper");
$group.append("<br><p>TEST TEST TEST</p>");

Answer 2

实际上你的jquery代码仍然正常。检查chrome调试器中的input元素，您可以看到TEST TEST TEST附加在html中的输入值之间。 chrome debugger image

它没有在页面中呈现的原因是因为我们不能在输入标记

中包含这些元素

Answer 3

您可以在表单内的输入周围包装div，如下所示：

＆＃13;

$(function() {

	'use strict';
  var $group = $(".group");
  $group.append("<br><p>TEST TEST TEST</p>"); 

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Here are my paragraphs</h1>
<p>This is the first paragraph</p>
<p>This is the second paragraph</p>
<form>
  <div class="group">
    <input value="(enter text here)">
  </div>
</form>

＆＃13;

希望这有帮助！

jQuery没有识别输入元素

3 个答案: