假设我有一个表单字段，我想向其附加一个span标签。可以用 jQuery 做到这一点吗？
我尝试了这段代码:
$("input").append("<span>My HTML to append</span>");
或者我必须使用其他东西来附加 HTML。
所以它会是这样的:
<input><span>My HTML to append</span></input>
但这行不通。
就像当您向 StackOverflow 上的问题添加标签时，每个标签都是一个 block 。
编辑:StackOverflow 在向问题添加标签时是如何做到的。
最佳答案
input elements 不能有任何子元素，因此不能使用 append在他们身上。
您可以使用 jQuery 的 val 设置它们的值方法。
如果您将该值设置为 <span>My HTML to append</span>，它们在任何情况下都不会渲染 HTML ，这正是您将在输入中看到的内容。
重新编辑:
So it would be something like this:
<input><span>My HTML to append</span></input>
这是无效的 HTML。再次 input elements不能有内容，它们是 "void" elements 。这就是为什么你不能使用 append在他们身上。
在下面回复您的评论:
How did StackOverflow do it when adding tags to the question.
他们没有。相反，有一个输入，当您完成输入中的标签时，他们会将其删除并将其放在输入前面的跨度中，因此您最终会得到:
<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>
关于javascript - 使用 jQuery 将 HTML 附加到表单字段，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23424274/