OMiD OMiD - 1 month ago 14
Javascript Question

add new textbox and buttons with javascript

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">

Answer

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.