JS:如何为新创建的HTML元素分配ID

JS: How to assign an ID to a newly created HTML element

本文关键字：HTML 元素 ID 分配 创建 新创建 JS      更新时间：2023-09-26

我正在构建一个动态表单。这个想法是，您可以按下按钮添加新的输入字段，用字符串数据填充它们，当您单击提交时，它会以正确的格式使用此数据创建一个div。

我已经完成了大部分工作，尽管我遇到的问题是只有第一个输入字段被识别，而 JS 创建的任何新文本字段都没有。

问题是我通过 ID 查找输入的值，但我不确定新创建的输入的 ID 是什么，因此我无法获取它。

我已经用我的原型设置了一个 JSFiddle，但即使我保存文件并在浏览器中打开它也能正常工作，它在那里也无法正常工作。

这是以防万一的代码：

    <!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style>
.HiddenDiv{
color: red;
}
</style>
<script>
//-----CREATES NEW INPUT LINE-----
var counter1 = 1;
var limit1 = 5;
function addInput(divName){
     if (counter1 == limit1)  {
          alert("You have reached the limit of adding " + counter1 + " inputs");
     }
     else {
          var newdiv = document.createElement('div');
          newdiv.innerHTML = "<input type='text' name='myInputs[]'>";
          document.getElementById(divName).appendChild(newdiv);
          counter1++;
     }
}
//-----TAKES VALUE AND PRINTS IT ON DIV-----
var counter2 = 0; //Prevents user from creating multiple nodes on submit
var limit2 = 1; //Amount of nodes that can be created per input field
function createNode(){
if (counter2 == limit2)  {
//Do nothing
}
else {
var input = document.getElementById('textInput1').value; //Retrieves input
var newText = document.createElement("li"); //Creates the HTML node
newText.innerHTML = input; //Sets the node's value to whatever is in the input
document.getElementById("Form").appendChild(newText); //Adds the node to the div
counter2++;
}
}
</script>
</head>
<body>
<div id="dynamicInput">
Job Requirements<br>
<input type="text" name="myInputs[]" id="textInput1">
</div>
<form method="POST">
<input type="button" value="+" onClick="addInput('dynamicInput');">
<input type="button" value="Submit" onClick="return createNode()">
</form>
<div id="Form" class="HiddenDiv">
</div>
</body>
</html>
我认为使用

document.querySelectorAll会更容易：

var inputs = document.querySelectorAll('input[name="myInputs[]"');

然后，您可以从循环输入中获取内容。

相关文章：