How to add
element inside input using jQuery

Question

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#usr").click(function () {
                var divElement = "<div style='color:yellow;'>more text</div>";
                $('#usr').val($('#usr').val() + divElement);
            });
        });
    </script>
</head>
<body>
    <input class="form-control" id="usr">
</body>
</html>

I want to add this div element inside the text box but it get as the string and display.

Is it possible to do this or is there any other way to do this like input. Thank you

seriously?? well its funny because i can't even imagine to do that. sorry! but its not possible — Gaurav Aggarwal, Feb 12 '16 at 05:48
Possible duplicate http://stackoverflow.com/questions/19236778/how-to-put-div-inside-input-type-text — John R, Feb 12 '16 at 05:51
http://stackoverflow.com/questions/17938461/how-to-display-div-inside-input-tag — John R, Feb 12 '16 at 05:52
@BuddhikaKulathilaka Then please accept that answer by clicking on right symbol. so, it will help to future user. — ketan, Feb 12 '16 at 10:31

score 1 · Answer 1 · answered Feb 12 '16 at 05:46

1

Putting div inside input is not possible .

Check Here

answered Feb 12 '16 at 05:46

brk

48,835
10
56
78

score 1 · Accepted Answer · answered Feb 12 '16 at 05:50

1

It is not possible to add div inside an input box but you can use contenteditable div instead of input field, if you have no such issue in using that.

And you can add anything inside that.

http://www.w3schools.com/tags/att_global_contenteditable.asp

answered Feb 12 '16 at 05:50

Shivam Tyagi

158
1
12

score 0 · Answer 3 · answered Feb 12 '16 at 05:50

it will add in input and return object type as output

<!DOCTYPE html>
 <html>
 <head>
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
 <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">     </script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#usr").click(function(){

    $('#usr').val($(this).html('<div></div>'));
});
});
</script>
</head>
<body>
<input class="form-control" id="usr">

it will return the object so object says it self that is added inside — abhay vyas, Feb 12 '16 at 05:57

JavidRathod · Answer 4 · 2016-02-12T06:01:21.083

0

$(document).ready(function(){
$("#usr").click(function(){
var divElement="<div style='color:yellow;'>more text</div>";
    $('#usr').val($('#usr').val() + divElement);
});
});

and when you want to add any html element then use append like below:

$('#usr').append($('#usr').val() + divElement);

edited Feb 12 '16 at 06:01

answered Feb 12 '16 at 05:50

JavidRathod

483
2
10

1

is this same funtion I put above? – Buddhika Kulathilaka Feb 12 '16 at 05:52
PLease Compare and Check @Buddhika Kulathilaka – JavidRathod Feb 12 '16 at 05:53
@javedrathod It will add div inside input? – ketan Feb 12 '16 at 05:54
yes it will put on click of input , and next time please check code and put your review – JavidRathod Feb 12 '16 at 05:55
@javedrathod OP doesn't want to display div element inside input. OP want to add div. Please read question first. https://jsfiddle.net/8sa6n2o3/ – ketan Feb 12 '16 at 05:57

score 0 · Answer 5 · answered Feb 12 '16 at 05:51

You can not put div Or any other element inside input. You can insert simple text inside input.

like:

$(document).ready(function(){
$("#usr").click(function(){
var divElement="more text";
    $('#usr').val($('#usr').val() + divElement);
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input class="form-control" id="usr">

How to add element inside input using jQuery

5 Answers5

How to add
element inside input using jQuery