javascript - 如何在创建文本框时动态创建 id？

Question

我正在看这个 fiddle :http://jsfiddle.net/npH8X/

    <div id='parent'>
    <textarea>txt1</textarea>
    <textarea>txt2</textarea>
    <textarea>txt3</textarea>
    </div>
    <button onClick="addBox()">add textarea</button>

    addBox = function(){
    var textBox = document.createElement("textarea");
    document.getElementById("parent").appendChild(textBox);
    }

任何人都有类似的 javascript 示例，但确切地展示了我如何在创建这些框时或之后立即为每个框赋予自己的 ID？

我想创建一个作家的工具，他们可以在其中将信息输入每个框，然后将所有输入移植到一个更大的容器中，因此框需要 ID 才能做到这一点...

谢谢

Answer 1

您需要做的就是设置 .id property创建文本框之后，但在将其插入 DOM 之前。这可以对应于一个变量，并根据它自动递增:

var count = 3; // Corresponding to the existing textbox count

addBox = function() {
  var textBox = document.createElement("textarea");
  count++;
  textBox.id = count;
  document.getElementById("parent").appendChild(textBox);
  console.log("New element's ID: " + textBox.id);
}

<div id='parent'>
  <textarea id="1">txt1</textarea>
  <textarea id="2">txt2</textarea>
  <textarea id="3">txt3</textarea>
</div>
<button onClick="addBox()">add textarea</button>

但是请注意，您不需要提供您的 <textarea>元素 ID，以便能够定位它们。您使用 document.querySelectorAll() 返回所有文本框的集合，包括动态创建的文本框:

addBox = function() {
  var textBox = document.createElement("textarea");
  document.getElementById("parent").appendChild(textBox);
}

checkBoxes = function() {
  console.log(document.querySelectorAll("#parent textarea"));
}

<div id='parent'>
  <textarea>txt1</textarea>
  <textarea>txt2</textarea>
  <textarea>txt3</textarea>
</div>
<button onClick="addBox()">add textarea</button>
<button onClick="checkBoxes()">check boxes</button>

希望对您有所帮助! :)

评论回答:

.querySelectorAll()简单地返回所有 <textarea> 的节点列表元素。因此，您可以使用 3 作为索引访问第四个元素(因为它从 0 开始)。 document.querySelectorAll("#parent textarea")[3]对应第四个<textarea> ，您可以使用 .value 检索其内容属性:

addBox = function() {
  var textBox = document.createElement("textarea");
  document.getElementById("parent").appendChild(textBox);
}

var box4content;

getBox4 = function() {
  if(document.querySelectorAll("#parent textarea")[3]) {
    box4content = document.querySelectorAll("#parent textarea")[3].value;
  }
  console.log("The variable `box4content` has the value: " +  box4content);
}

<div id='parent'>
  <textarea>txt1</textarea>
  <textarea>txt2</textarea>
  <textarea>txt3</textarea>
</div>
<button onClick="addBox()">add textarea</button>
<button onClick="getBox4()">get box 4</button>