Home/ Questions/Q 518839
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T07:58:42+00:00

I have an html form. When you click the button, a javascript function adds

  • 0

I have an html form. When you click the button, a javascript function adds a new field. I’m trying to have the function also add a ‘label’ for the field as well.

I’ve tried using document.createElement(“LABEL”), but that doesn’t let me change the innerHtml (or maybe I’m doing it wrong..), nor add a closing

Here is my code. Thanks!

var instance = 2;

        function newTextBox(element)
        {       
            instance++; 
            // Create new input field
            var newInput = document.createElement("INPUT");
            newInput.id = "text" + instance;
            newInput.name = "text" + instance;
            newInput.type = "text";
            instance++; 

            document.body.insertBefore(document.createElement("BR"), element);
            document.body.insertBefore(newInput, element);

        }
    </script>
</head>


<body>
    <LABEL for="text1">First name: </LABEL>
    <input id="text1" type="text" name="text1">
    <LABEL for="text2">Last name: </LABEL>
    <input id="text2" type="text" name="text2">



    <input type="button" id="btnAdd" value="New text box" onclick="newTextBox(this);" />
</body>

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
       function newTextBox(element)
            {               
                    instance++; 
                    // Create new input field
                    var newInput = document.createElement("INPUT");
                    newInput.id = "text" + instance;
                    newInput.name = "text" + instance;
                    newInput.type = "text";

                    var label = document.createElement("Label");

                    label.htmlFor = "text" + instance;
                    label.innerHTML="Hello";
                    instance++; 

                    document.body.insertBefore(document.createElement("BR"), element);
                    document.body.insertBefore(newInput,element);
                    document.body.insertBefore(label, newInput);

    Note that for attribute of the label tag, corresponds to the property htmlFor fo the label object in javascript

    • 0