javascript - 如何使用 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

您不能将 a <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“追加”方法！