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

Question

我有一个文本框：

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

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

    <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”方法！