克隆元素时更改 JavaScript 中子元素的 ID

Question

所以我尝试了一些事情，但并没有真正取得任何进展。经过广泛的谷歌搜索，我决定向 SO 中的大师寻求帮助。

想法：在单击按钮时复制下拉列表和输入字段（可以是任意次数）

解决方案： JavaScript 单击侦听器，获取现有 div 的副本并创建一个新的 div。

问题：当使用下拉列表和输入字段克隆 div 时，JavaScript 代码不会更改子元素的 ID，从而使下拉列表无法使用（它们可以交互，但我不能使用它们的数据）。

如果有人想玩的话，我已经制作了一个JSFiddle。

HTML：

            <div id="row-container">
                <div id="profile-row0">
                    <select id="select-item0" class="selectpicker" data-live-search="true">
                        <option>id</option>
                        <option>email</option>
                        <option>phone</option>
                    </select>
                    <input id="select-item-value0" class="select-item-value" placeholder="Item value"/>
                </div>
            </div>

            <button id="add-button"> GO </button>

JS：

document.getElementById("add-button").addEventListener("click", addItemRow);

var i = 0;

function addItemRow(){
    var original = document.getElementById('profile-row' + i);
    var clone = original.cloneNode(true);
    clone.id = "profile-row" + ++i;
      //clone.firstChild.id = "select-item" + ++i;
      //clone.lastChild.id = "select-item-value" + ++i;
    original.parentNode.appendChild(clone);
}

我尝试的最后一件事是在 JavaScript 代码中注释掉。

Answer 1

您的代码几乎可以正常工作，但是您错过了一件事：第一个和最后一个元素不是您要查找的元素（这些不是机器人......抱歉，我忍不住了）。第一个和最后一个元素是#text节点，而不是节点HtmlElement。

您可以修改您的代码以使其工作：

function addItemRow(){
    var original = document.getElementById('profile-row' + i);
    var clone = original.cloneNode(true);
    i++;
    clone.id = "profile-row" + i;
    clone.getElementsByTagName('select')[0].id = "select-item" + i;
    clone.getElementsByTagName('input')[0].id = "select-item-value" + i;
    original.parentNode.appendChild(clone);
}