Question

假设我有一个表单字段，我想append一个span标记。是否可以使用jQuery执行此操作？

我试过这段代码：

$("input").append("<span>My HTML to append</span>");

或者我是否必须使用其他内容来附加HTML。

所以它会是这样的：

<input><span>My HTML to append</span></input>

但那不行。

类似于在StackOverflow上向问题添加标签时，每个标签都是一个块。

编辑：StackOverflow在为问题添加标签时是如何做到的。

Answer 1

输入元素不能有任何子节点，所以不，你不能。

如果您愿意，可以将值（使用.val()方法）设置为HTML字符串。

您可以将该字符串与现有值连接。

var $in = $("input");
$in.val(
    $in.val() + "<span>My HTML to append</span>"
);

Answer 2

input元素不能包含任何子元素，因此您无法在其上使用append。

您可以使用jQuery的val方法设置其值。

如果您将值设置为<span>My HTML to append</span>，它们将无法呈现 HTML，这正是您在输入中看到的内容。

重新编辑：

所以它会是这样的：

<input><span>My HTML to append</span></input>

这是无效的HTML。同样input elements不能包含内容，它们是"void" elements。这就是为什么你不能在它们上使用append。

重新评论以下内容：

StackOverflow在为问题添加标签时是如何做到的。

他们没有。相反，有一个输入，当你在输入中完成一个标记时，它们会删除它并将它放在输入前面的一个范围内，所以最终得到：

<span>
    <span class="post-tag">tag</span>
    <span class="post-tag">another-tag</span>
</span>
<input type="text">

在任何现代浏览器中，右键单击标签输入字段，然后选择“检查元素”以查看此内容。

这是一个非常快速而又脏的例子（但是有很多插件用于此操作 - tagit，select2 [其中一个我的客户使用和喜欢]，......）：Live Copy

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<meta charset=utf-8 />
<title>Tags-Like Input</title>
  <style>
    .input-wrapper {
      border: 1px solid #aaa;
    }
    .post-tag {
      border: 1px solid #00a;
      margin-right: 2px;
    }
  </style>
</head>
<body>
  <div class="input-wrapper">
    <input type="text" id="theInput">
  </div>
  <script>
    (function() {
      $("#theInput").on("keypress", function(e) {
        if (e.which === 32) {
          e.preventDefault();
          addTag($.trim(this.value));
          this.value = "";
        }
      });
      function addTag(tag) {
        $('<span class="post-tag"></span>')
          .text(tag)
          .insertBefore("#theInput");
      }
    })();
  </script>
</body>
</html>

Answer 3

正如其他人指出input元素不能有子元素。

因此，在标记系统中，常见的方法是使用输入元素选择标记，然后将其添加到放置在输入元素旁边的容器元素，并将其设置为使它们看起来像单一控制。

以粗暴的方式，您可以使用.after() / .before()来执行此操作

$("input").after("<span>My HTML to append</span>");

但是已经有很多插件可以用来做，所以我建议使用其中一个像select2

使用jQuery将HTML附加到表单字段

3 个答案: