How do I add an input field after an element was created with javascript?

Question

I am trying to add an input field to a created element. This is my code.

var Images_to_beuploaded_cont = document.getElementById("Images_to_beuploaded_cont");

  var carCont = document.createElement('div');
  carCont.className += "multipleImageAdding";

  Images_to_beuploaded_cont.insertBefore(carCont, Images_to_beuploaded_cont.firstChild);

So, the code above adds the following

<div id="multipleImageAdding"></div>

What I want to do is the code below.

<div id="multipleImageAdding">
   <input type="text" name="fname">
</div>

Is this even possible? to add an element to another after it was created?

Of course, yes. Just appendChild your input to div.

Yeldar Kurmangaliyev
– Yeldar Kurmangaliyev

2017-02-22 03:50:55 +00:00
Commented Feb 22, 2017 at 3:50 — Yeldar Kurmangaliyev
– Yeldar Kurmangaliyev, Commented Feb 22, 2017 at 3:50

Josh Crozier · Accepted Answer · 2017-02-22 03:57:25Z

1

Is this even possible? to add an element to another after it was created?

Yes, you could add the input element before or after appending the parent container element.

After creating the input element and adding the desired type and name attributes, just use the appendChild() method:

var input = document.createElement('input');
input.type = 'text';
input.name = 'fname';

carCont.appendChild(input);

Snippet:

var Images_to_beuploaded_cont = document.getElementById("Images_to_beuploaded_cont");

var carCont = document.createElement('div');
carCont.className += "multipleImageAdding";

var input = document.createElement('input');
input.type = 'text';
input.name = 'fname';

carCont.appendChild(input);

Images_to_beuploaded_cont.insertBefore(carCont, Images_to_beuploaded_cont.firstChild);

<div id="Images_to_beuploaded_cont"></div>

edited Feb 22, 2017 at 3:57

answered Feb 22, 2017 at 3:51

Josh Crozier

242k56 gold badges401 silver badges316 bronze badges

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

1 Comment

Divern Over a year ago

this worked like a charm. Now, all I will have to figure out is how to add it at the bottom of the div if I even add another element inside that div. Thanks mate.

Collectives™ on Stack Overflow

How do I add an input field after an element was created with javascript?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related