我如何使用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”方法！