Question

我一直在尝试创建一个随机化从某些输入中获取的元素的网站，因此我没有严格的输入量，我希望有一个自动生成输入的按钮。我的问题是，应该出现的元素，只是作为文本或根本不出现

   <div id="objs">
      <input id="obj_1">
      <input id="obj_2">
    </div>
    <button onclick="addObj();">Add an Object</button>
    <script>
        var i = 2;
     function addObj() {
        i = i+1;
        var existObj = document.getElementById("objs");
        var addedElement = '<input id="obj_' + i + '">';
        //var addedElement = document.createTextNode('<input id="obj_' + i + '">'); 
        //existObj.appendChild(addedElement); 
        //above was test with appending a child which resulted in text outcome
        var newObj = existObj + addedElement;
        existObj = newObj;
        console.log(existObj);
      }
     </script>

我已经尝试过在这里和其他地方找到答案

（how to add element within an element in html和How to add canvas to div element dynamically?（这些来自StackOverflow））

两次尝试都没有结果或文本结果。

Answer 1

您可以使用createElement和appendChild

function addObj() {
    var existObj = document.getElementById("objs");

    // count those input elements
    // change the selector to '*' or whatever fits your needs
    // if there are also other elements you need to count from id="objs"
    var i = existObj.querySelectorAll('[id^="obj_"]').length + 1; 

    var newElement = document.createElement('input');
        newElement.id = 'obj_' + i;

    existObj.appendChild(newElement);
}

<div id="objs">
  <input id="obj_1">
  <input id="obj_2">
</div>
<button onclick="addObj();">Add an Object</button>

Answer 2

你说

以上是测试，附加了导致文本结果的孩子

这是逻辑，因为您正在使用document.createTextNode。但是，您应该使用document.createElement。

   <script>
     var i = 2;
     function addObj() {
        i = i+1;
        var existObj = document.getElementById("objs");
        var addedElement = document.createElement("input");
        addedElement.id = 'obj_' + i;
        existObj.appendChild(addedElement); 
        var newObj = existObj + addedElement;
        existObj = newObj;
        console.log(existObj);
      }
     </script>

Answer 3

由于我现在掌握了更多知识，因此我更新了答案，以便更好地符合良好的JS编码。现在就是这样：

每次按下按钮时都会添加一个元素：

＆＃13;

let i = 2;

function addObj() {
  i++;
  let container = document.getElementById("objs");
  let newObj = document.createElement("INPUT");
  newObj.setAttribute("id", `obj_${i}`);
  container.appendChild(newObj);
}

＆＃13;

<div id="objs">
  <input id="obj_1">
  <input id="obj_2">
</div>
<button onclick="addObj();">Add an Object</button>

＆＃13;

我认为你想要复杂化。

我不太清楚JS在后台如何运作。但是获得一个Element并获得它的innerHTML之间可能存在差异。否则就不会有区别，不是吗？

如何在div元素中添加内容

3 个答案: