javascript – 为html表单创建输入字段…但也为它添加“标签”?

前端之家收集整理的这篇文章主要介绍了javascript – 为html表单创建输入字段…但也为它添加“标签”?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个 HTML表单.单击该按钮时,javascript函数添加一个新字段.我正在尝试让该功能也为该字段添加标签”.

我已经尝试过使用document.createElement(“LABEL”),但这不允许我更改innerHtml(或者我可能做错了..),也没有添加结束

这是我的代码.谢谢!



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>

解决方法

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);

注意,label标签for属性对应于javascript中标签对象的属性htmlFor

原文链接:https://www.f2er.com/js/155767.html

猜你在找的JavaScript相关文章