add new textbox and buttons with javascript

Question

I have 3 textboxs and 6 buttons. I want to add new textbox and buttons after textbox(element2) and buttons(element2) with javascript. How can I do it. :)

<input type="text"   id="element1">
<input type="button" id="element1">
<input type="button" id="element1">

<input type="text"   id="element2">
<input type="button" id="element2">
<input type="button" id="element2">

<input type="text"   id="element3">
<input type="button" id="element3">
<input type="button" id="element3">

You have multiple times the same ID. ID should be **unique** — Weedoze, Oct 20 '16 at 08:38
Possible duplicate of [Creating Dynamic button with click event in javascript](http://stackoverflow.com/questions/7707074/creating-dynamic-button-with-click-event-in-javascript) — Manish, Oct 20 '16 at 08:51

score 0 · Accepted Answer · edited Oct 30 '16 at 13:23

Since Ids should be unique, I'll modify your HTML code :

<div id="div">
    <input type="text"   id="text1">
    <input type="button" id="button1a">
    <input type="button" id="button1b">

    <input type="text"   id="text2">
    <input type="button" id="button2a">
    <input type="button" id="button2b">

    <input type="text"   id="text2">
    <input type="button" id="button2a">
    <input type="button" id="button2b">
</div>

And the script would look like this :

<script>
    var text2_new = document.createElement("input");

    var div= document.getElementById("div");
    var button2b= document.getElementById("button2b");
    div.insertBefore(text2_new,button2b);
</script>

Repeat the the script for every new element you need to add.
In your context I'd place the group of inputs inside of <div> tags to delimit the groups.

add new textbox and buttons with javascript

1 Answers1