无法在 JavaScript 中获取异步子生成

Question

我正在尝试格式化此代码，即当用户单击按钮时，每个带有重定向按钮的新输入字段都会异步插入到无序列表中，直到我添加了重定向按钮，以便在每次单击生成按钮时插入。这是我的JS代码...

function spawnSilly()
        {
            var div = document.createElement("DIV");
            var input = document.createElement("INPUT");
            var button = document.createElement("BUTTON");
            var att1 = document.createAttribute("type")
            var att2 = document.createAttribute("placeholder")
            var att3 = document.createAttribute("type")
            var att4 = document.createAttribute("onClick")
            att1.value = "text"
            att2.value = "Title"
            att3.value = "button"
            att4.value = "redirect()"
            input.setAttributeNode(att1)
            input.setAttributeNode(att2)
            button.setAttribute(att3)
            button.setAttribute(att4)
            div.appendChild(input)
            div.appendChild(button);
            var list = document.getElementById("spawnList");
            list.insertBefore(div, list.childNodes[0]);
        }

这是我的网页

<ul id="spawnList">

</ul>
<button id="spawnbtn" onClick="spawnSilly()">Add</button>

似乎是导致问题的按钮，但我无法弄清楚为什么？任何帮助都会很棒！谢谢

Answer 1

请注意，setAttribute(( 有两个参数，属性的name和value。以正确的方式使用它，代码可以像这样简化：

function redirect()
{
    console.log("Redirect clicked!");
}
function spawnSilly()
{
    var div = document.createElement("DIV");
    var input = document.createElement("INPUT");
    var button = document.createElement("BUTTON");
    input.setAttribute("type", "text");
    input.setAttribute("placeholder", "Title");
    button.setAttribute("type", "button");
    button.setAttribute("onClick", "redirect()");
    button.innerHTML = "Redirect";
    div.appendChild(input)
    div.appendChild(button);
    var list = document.getElementById("spawnList");
    list.insertBefore(div, list.childNodes[0]);
}

.as-console {background-color:black !important; color:lime;}

<ul id="spawnList"></ul>
<button id="spawnbtn" onClick="spawnSilly()">Add</button>

Answer 2

setAttribute取两个参数，第一个是属性的name，第二个是value，但你只有一个 - https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute。

相反，您可以使用运算符将值设置为属性.。

此外，您正在附加函数调用att4.value = "redirect()"。因此，每当添加按钮时，都会调用您的redirect。而是将callback附加到redirect，以便在clicked按钮时调用它。

function spawnSilly()
{
    const div = document.createElement("DIV");
    const input = document.createElement("INPUT");
    const button = document.createElement("BUTTON");
    
    input.type = "text";
    input.value = "Title";
    
    button.type ="button";
    button.onclick = redirect;
    button.textContent = "Click Me!";
    div.appendChild(input)
    div.appendChild(button);
    const list = document.getElementById("spawnList");
    list.insertBefore(div, list.childNodes[0]);
}
function redirect() {
    console.log('In redirect');
}

<ul id="spawnList">
</ul>
<button id="spawnbtn" onClick="spawnSilly()">Add</button>