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

Question

I have a textbox :

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

I want to add a span between the input element using jquery like the below:

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

How can I achieve that?

Answer 1

I will answer three questions:

How to append some HTML in an element?

Use jQuery: $('div').append('<span>Added span</span>');

How to add a placeholder to an input element?

Use the following markup: <input type="text" placeholder="My placeholder" /> (Browser support: http://caniuse.com/input-placeholder )

How to add text by default in my input?

Use the following markup: <input type="text" value="My text" />

Answer 2

You can't put a <span> (or any element) into a text input. Look at this fiddle: http://jsfiddle.net/GAFTk/

Your browser will change it to:

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

and render them side by side.

Answer 3

You don't want to put html elements inside of input elements, but in general you use jQuery.append()

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

Result:

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

If you append something else it won't remove whats already in there.

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

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

If you want to overwrite whats already inside you'd use .html instead of .append, or .empty and then .append

Answer 4

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

Answer 5

First:

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

then:

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

Result:

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

edit: almost forget you can also use the jQuery "append" method if you want to ADD something instead of overwrite it!