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

假设我有一个表单字段，我想给它添加一个

span

标记。使用jQuery可以做到这一点吗

我尝试了以下代码：

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

$（“输入”）.append（“要追加的我的HTML”）；

或者我必须使用其他东西来附加HTML

所以应该是这样的：

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

myhtml要追加的内容

但那是行不通的

例如，当您向StackOverflow上的问题添加标记时，每个标记都是一个块

---

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

输入元素不能有任何子节点，因此不，您不能

如果愿意，可以将值（使用

.val（）

方法）设置为HTML字符串

可以将该字符串与现有值连接起来

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

var$in=$（“输入”）；
美元面值(
$in.val（）+“要追加的我的HTML”
);

input

元素不能有任何子元素，因此不能对其使用

append

您可以使用jQuery的

val

方法设置它们的值

它们在任何情况下都不会呈现HTML，如果您将值设置为“My HTML to append”，这正是您将在输入中看到的内容

---

重新编辑：

所以应该是这样的：

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

My HTML以追加

这是无效的HTML。同样不能有内容，他们是。这就是为什么不能对它们使用

append

---

下面是您的评论：

---

StackOverflow在向问题添加标记时是如何做到的

他们没有。相反，这里有一个输入，当您在输入中完成一个标记时，他们会将其删除，并将其放在输入前面的一个跨距中，因此您会得到：

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

标签
另一个标签

在任何现代浏览器中，右键单击标记输入字段并选择“检查元素”以查看此活动

这里有一个非常快速而肮脏的例子（但是有很多插件可以做-，[我的一个客户使用并喜欢]，…）：

像输入这样的标签
.输入包装器{
边框：1px实心#aaa；
}
.邮政标签{
边框：1px实心#00a；
右边距：2px；
}
（功能（）{
$（“#输入”）。在（“按键”，功能（e）{
如果（e.which==32）{
e、 预防默认值（）；
addTag（$.trim（this.value））；
此值为“”；
}
});
函数addTag（tag）{
$('')
.文本（标签）
.insertBefore（“#输入”）；
}
})();

正如其他人所指出的，

input

元素不能有子元素

因此，在标记系统中，常见的方法是使用输入元素来选择标记，一旦您这样做，将其添加到放置在输入元素旁边的容器元素中，并将其设置为类似于单个控件的样式

用一种非常简陋的方式你可以像这样做

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

$（“输入”）。在（“要附加的我的HTML”）之后；

---

但是已经有很多插件可以使用了，所以我建议您使用其中一个，比如

您没有将span附加到输入标记。它不适用您不能将HTML附加到表单元素。如果您的意思是要设置它的值，请使用

val（）

我想您要查找的是类似

$（“输入”）。在（“My HTML to append”）之后

@ArunPJohny:我敢打赌就是这样，很好的一个。发布你希望最终得到的html。StackOverflow在向问题添加标记时是如何做到的。@user3588664:我添加了一个非常快速和肮脏的例子。