javascript将html标记添加到所有输入必填字段

我有以下简单形式的输入字段：

var login = document.getElementById("login");
var password = document.getElementById("password");
var name = document.getElementById("name");
var email = document.getElementById("email");

我想做的是当按下提交按钮时，在输入字段之前添加span元素

var spanTag = document.createElement("span");

insertBefore

仅适用于最后一个元素

完整代码：

<script>
    function addRequiredAttribute(buttonName) {
        var login = document.getElementById("login");
        var password = document.getElementById("password");
        var name = document.getElementById("name");
        var email = document.getElementById("email");

        var spanTag = document.createElement("span");
        spanTag.className ="required";

        if(buttonName === "add") {
            login.setAttribute("required","required");
            login.parentNode.insertBefore(spanTag, login);
            password.setAttribute("required","required");
            password.parentNode.insertBefore(spanTag, password);
            name.setAttribute("required","required");
            name.parentNode.insertBefore(spanTag, name);
            email.setAttribute("required","required");
            email.parentNode.insertBefore(spanTag, email);
        } else {
            login.setAttribute("required","required");
            login.parentNode.insertBefore(spanTag, login);
        }
    }
</script>

函数addRequiredAttribute（按钮名称）{
var login=document.getElementById（“登录”）；
var password=document.getElementById（“密码”）；
var name=document.getElementById（“名称”）；
var email=document.getElementById（“电子邮件”）；
var spanTag=document.createElement（“span”）；
spanTag.className=“必需”；
如果（按钮名称==“添加”）{
login.setAttribute（“必需”、“必需”）；
login.parentNode.insertBefore（spanTag，login）；
setAttribute（“必需”、“必需”）；
password.parentNode.insertBefore（spanTag，password）；
name.setAttribute（“必需”、“必需”）；
name.parentNode.insertBefore（spanTag，name）；
email.setAttribute（“必需”、“必需”）；
email.parentNode.insertBefore（spanTag，email）；
}否则{
login.setAttribute（“必需”、“必需”）；
login.parentNode.insertBefore（spanTag，login）；
}
}

您不能在所有字段之前插入相同的span，您应该使用

spanTag.cloneNode（true）

为每个输入字段克隆它

函数addRequiredAttribute（按钮名称）{
var login=document.getElementById（“登录”）；
var password=document.getElementById（“密码”）；
var name=document.getElementById（“名称”）；
var email=document.getElementById（“电子邮件”）；
var spanTag=document.createElement（“span”）；
spanTag.className=“必需”；
spanTag.textContent=“示例span text”；
如果（按钮名称==“添加”）{
login.setAttribute（“必需”、“必需”）；
login.parentNode.insertBefore（spanTag.cloneNode（true），login）；
setAttribute（“必需”、“必需”）；
password.parentNode.insertBefore（spanTag.cloneNode（true），password）；
name.setAttribute（“必需”、“必需”）；
name.parentNode.insertBefore（spanTag.cloneNode（true），name）；
email.setAttribute（“必需”、“必需”）；
email.parentNode.insertBefore（spanTag.cloneNode（true），email）；
}否则{
login.setAttribute（“必需”、“必需”）；
login.parentNode.insertBefore（spanTag，login）；
}
}
addRequiredAttribute（'add'）







@Zakaria的答案是完美的，但是您可以将这些输入嵌套在div中或添加特定于它们的类，而不是单独创建
span
标记


一小条
示例代码

（函数（）{
var form=document.getElementsByClassName（“表单”）；
var inputs=form[0]。getElementsByTagName（“输入”）；
对于（变量i=0；i

span{
填充物：5px；
背景：ddd；
保证金：5px；
}









请添加其余的代码。如何收集所有输入，但只设置所需的标记？
inputs[i].required;