Question

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

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>

Answer 1

您无法在所有字段之前插入相同的范围，您应该使用spanTag.cloneNode(true)为每个输入字段克隆它。

＆＃13;

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";
  spanTag.textContent ="example span text ";

  if(buttonName === "add") {
    login.setAttribute("required","required");
    login.parentNode.insertBefore(spanTag.cloneNode(true), login);
    password.setAttribute("required","required");
    password.parentNode.insertBefore(spanTag.cloneNode(true), password);
    name.setAttribute("required","required");
    name.parentNode.insertBefore(spanTag.cloneNode(true), name);
    email.setAttribute("required","required");
    email.parentNode.insertBefore(spanTag.cloneNode(true), email);
  } else {
    login.setAttribute("required","required");
    login.parentNode.insertBefore(spanTag, login);
  }
}

addRequiredAttribute('add');

＆＃13;

<div>
  <input type="text" id="login" /><br/>
</div>
<div>
  <input type="password" id="password" /><br/>
</div>
<div>
  <input type="text" id="name" /><br/>
</div>
<div>
  <input type="email" id="email" />
</div>

＆＃13;

希望这有帮助。

Answer 2

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

Updated JSFiddle

段

inputs[i].required;

示例代码

＆＃13;

(function () {
    var form = document.getElementsByClassName("form");
    var inputs = form[0].getElementsByTagName("input");
    for (var i = 0; i < inputs.length; i++) {
        var span = document.createElement("span");
        span.id = "span_" + i;
        span.textContent = "Span " + i + " Required: " + inputs[i].required;
        inputs[i].parentNode.insertBefore(span, inputs[i]);
    }
})()

＆＃13;

span {
    padding:5px;
    background:#ddd;
    margin:5px;
}

＆＃13;

<div class="form">
    <input type="text" id="login" required>
    <br/>
    <input type="text" id="password">
    <br/>
    <input type="text" id="name" required>
    <br/>
    <input type="text" id="email">
    <br/>
</div>

＆＃13;

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

2 个答案:

段

示例代码