如何使用jquery在另一个html元素的开始和结束标记之间插入html元素

Question

我有一个文本框：

    <input type="text"></input>

我想使用jquery在输入元素之间添加一个span，如下所示：

    <input type="text"><span>Added span</span></input>

我怎样才能做到这一点？

Answer 1

我将回答三个问题：

如何在元素中添加一些HTML？

使用jQuery：$('div').append('<span>Added span</span>');

如何将占位符添加到输入元素？

使用以下标记：<input type="text" placeholder="My placeholder" />（浏览器支持：http://caniuse.com/input-placeholder）

如何在我的输入中默认添加文字？

使用以下标记：<input type="text" value="My text" />

Answer 2

您不能将<span>（或任何元素）放入文本输入中。看看这个小提琴：http://jsfiddle.net/GAFTk/

您的浏览器会将其更改为：

<input type="text" /><span>Text</span>

并将它们并排渲染。

Answer 3

您不希望将html元素放在输入元素中，但通常使用jQuery.append（）

<div id="demo"></div>
<script>$("#demo").append("<span>added span</span>");</script>

结果：

<div id="demo"><span>added span</span></div>

如果你附加别的东西，它就不会删除那里已有的东西。

<script>$("#demo").append("<span>another</span>");</script>

<div id="demo"><span>added span</span><span>another</span></div>

如果你想覆盖已经存在的内容，你可以使用.html而不是.append，或.empty，然后使用.append

Answer 4

$('#inputId').innerHtml('<span>adding span</span>');

Answer 5

首先：

<input id="inserthere" type="text"></input>

然后：

$('#inserthere').innerHtml('<span>Added span</span>');

结果：

<input id="inserthere" type="text"><span>Added span</span></input>

编辑：几乎忘了你也可以使用jQuery“append”方法，如果你想添加一些东西而不是覆盖它！