Question

我的代码不想以我想要的正确方式创建元素它根本不会创造任何东西

所以有人可以帮助我吗???

function creat_inputs() {
        var crsk=document.getElementById('skills_input');
        var skills=document.getElementById('skills_num').value;
        var count = $("#skills_input").children().length;
        var di=document.createElement("div");
        di.className='input-group in_group';
        var g=document.createElement("input");
        crsk.appendChild(di);
         g.className='form-control';
         g.setAttribute("type","text");
         g.setAttribute("placeholder","The Skill...");
        while (count != skills) {
            if (count > skills) {
               crsk.removeChild(crsk.lastChild);
                count--;
                document.getElementById("pp").innerHTML=document.getElementById("pp").innerHTML+">";
            }
            if (count < skills) {    
            crsk.appendChild(di);
            di.appendChild(g);
            count++;
            document.getElementById("pp").innerHTML=document.getElementById("pp").innerHTML+"<";
            }
            if (count === skills) {
                document.getElementById("pp").innerHTML=document.getElementById("pp").innerHTML+"=";
               break;
            
            }
        }
        
    }

<input onkeyup="creat_inputs()" id="skills_num" class="form-control" type="number" placeholder="How Many Skills :">
<div id="skills_input" style="text-align: center">
</div>
<p id="pp"></p>

Answer 1

您反复添加相同的元素。您每次都必须创建新元素：

function creat_inputs() {
  var crsk = document.getElementById('skills_input');
  var skills = document.getElementById('skills_num').value;
  var count = crsk.children.length;
  while (count != skills) {
    if (count > skills) {
      crsk.removeChild(crsk.lastChild);
      count--;
      document.getElementById("pp").innerHTML = document.getElementById("pp").innerHTML + ">";
    }
    if (count < skills) {
      var di = document.createElement("div");
      di.className = 'input-group in_group';
      var g = document.createElement("input");
      g.className = 'form-control';
      g.setAttribute("type", "text");
      g.setAttribute("placeholder", "The Skill...");
      crsk.appendChild(di);
      di.appendChild(g);
      count++;
      document.getElementById("pp").innerHTML = document.getElementById("pp").innerHTML + "<";
    }
    if (count === skills) {
      document.getElementById("pp").innerHTML = document.getElementById("pp").innerHTML + "=";
      break;
    }
  }
}

<input onkeyup="creat_inputs()" id="skills_num" class="form-control" type="number" placeholder="How Many Skills :">
<div id="skills_input" style="text-align: center">
</div>
<p id="pp"></p>

我用var count = crsk.children.length;替换了使用jQuery的唯一一行。

创建元素时出错

1 个答案: