Question

我想用warnnig类和Glyphicons更改我的输入框，所以点击确定后通过Dom我想更改类并添加新的span标记。

     <body>
<div class="container">
<div class="row">
    <div class="col-md-10 ">
        <form class="">
            <div class="form-group" id="namediv">
                <label for="name">Name</label>
                <input type="text" class="form-control" name="name" id="name">
            </div>

            <input type="button" class="btn btn-primary btn-lg" id="n_button" name="n_button" value="ok"> 
            </form>
    </div>
</div>
</div>
 <script>
  var a = document.getElementById('n_button');
  a.addEventListener('click',function(){
  var ediv = document.getElementById('namediv');
             ediv.className = ediv.className +' form-group has-warning has-feedback';
             //ediv.classList.add("has-warning")

             var name = document.getElementById('name');
             var span1 = document.createElement('span');
             span1.className = "glyphicon glyphicon-warning-sign form-control-feedback" ;
             span1.setAttribute("aria-hidden",'true');
             name.appendChild(span1) ;
             var span2 = document.createElement('span');
             span2.className = "sr-only" ;
             span2.setAttribute("id",'inputWarning2Status');
             span1.appendChild(span2);
        },false) ;
       </script>

Answer 1

您无法将DOMElement插入input，您需要使用父元素，在这种情况下，DOMElement的ID为namediv

var a = document.getElementById('n_button');

a.addEventListener('click', function() {
  var ediv = document.getElementById('namediv');
  ediv.className = ediv.className + ' form-group has-warning has-feedback';

  var span1 = document.createElement('span');
  span1.className = "glyphicon glyphicon-warning-sign form-control-feedback";
  span1.setAttribute("aria-hidden", 'true');
  ediv.appendChild(span1);

  var span2 = document.createElement('span');
  span2.className = "sr-only";
  span2.setAttribute("id", 'inputWarning2Status');
  span1.appendChild(span2);
}, false);

/* only for example */
.form-control-feedback {
  width: 100px;
  height: 100px;
  border: 1px solid red;
  display: inline-block;
}

<div class="container">
  <div class="row">
    <div class="col-md-10 ">
      <form class="">
        <div class="form-group" id="namediv">
          <label for="name">Name</label>
          <input type="text" class="form-control" name="name" id="name">
        </div>

        <input type="button" class="btn btn-primary btn-lg" id="n_button" name="n_button" value="ok">
      </form>
    </div>
  </div>
</div>

DOM代码有什么问题？

1 个答案: