How to insert <input> tag inside <div> tag using javascript?

Question

I am new to javascript. I just want to create a list with textbox and label in a row.

So that I created a ul tag with id cstList.

and called a function listData() on the onclick event

Inside that I am trying to create a input tag inside a div tag.

But i am getting error when trying to run this.

Here is my code:

function listData()
    {       
        //var a = sessionStorage.getItem('id');
        if(sessionStorage == null)
        {
            alert("Session storage not supported here");
        }
        else
        {
            var ss = sessionStorage.getItem('id');
            alert("storage value is: "+ss);
        }
    var rows = prompt('Please type in the number of required rows');
    var listCode = '';

    for (var i = 0; i < rows; i++) {
        var listID = 'list_' + i.toString();
        var divID = 'div_' + i.toString();      
            listCode += '<li id="' + listID + '" onclick="itemClicked(this.id);"><div id = "'+ divID + '"> <input type= 'text' id= 'boltQTY' name= 'boltQTY' value = 'abc' size="5"/> </div></li>';
    }
    document.getElementById('cstList').innerHTML = listCode;
    }

This is the above line where i am getting error: Unexpected Identifier

 listCode += '<li id="' + listID + '" onclick="itemClicked(this.id);"><div id = "'+ divID + '"> <input type= 'text' id= 'boltQTY' name= 'boltQTY' value = 'abc' size="5"/> </div></li>';

looks like you forgot a bunch of plus signs when concatenating the string — thescientist
– thescientist, Commented Nov 16, 2012 at 4:29

KingKongFrog · Accepted Answer · 2012-11-16 04:31:21Z

1

You are using single quotes and that is breaking the string.

<input type= 'text' id= 'boltQTY' name= 'boltQTY' value = 'abc' size="5"/>

should be:

<input type= "text" id= "boltQTY" name= "boltQTY" value = "abc" size="5"/>

answered Nov 16, 2012 at 4:31

KingKongFrog

14.5k22 gold badges78 silver badges134 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Narendra Pal Over a year ago

thts really nice. I got the solution quickly. Thanks a lot

Narendra Pal Over a year ago

i met with one more issue here. the input boxes are placed perfectly. but why the string is not getting entered here. I removed onclick from this. then to its not getting input

Urg Mu · Accepted Answer · 2012-11-16 04:36:20Z

1

That has to be double-single-single-double

listCode += "<li id='" + listID + "' onclick='itemClicked(this.id);'><div id = '"+ divID + "'> <input type='text' id='boltQTY' name='boltQTY' value='abc' size='5'/> </div></li>";

variable = "string" + var1 + "string=' " + var2 +"' ";

Simply make sure plus sign (+) is in between double quotes ("")

answered Nov 16, 2012 at 4:36

Urg Mu

466 bronze badges

1 Comment

Narendra Pal Over a year ago

i met with one more issue here. the input boxes are placed perfectly. but why the string is not getting entered here. I removed onclick from this. then to its not getting input

Collectives™ on Stack Overflow

How to insert <input> tag inside <div> tag using javascript?

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related