Javascript:向 dom 添加和删除元素

Question

我正在尝试动态添加新元素到我的 html 中。但我目前停留在“第二层”。它以一个 div 开始，新元素将存储在:

<div id="inputquestions"></div>                   

当我单击按钮时，新元素将通过 JavaScript 函数添加到 div，如下所示

function addQuestion() {
        var div = document.createElement('div');

        questionID++; // increment questionID to get a unique ID for the new element

        div.className = 'newQuestion';

        div.id = 'newQuestionID';

        div.innerHTML =
            "<div class='input-group'>" +
            "<input id='question-" + questionID + "' class='form-control' name='questionbox' type='text' placeholder='New Question'/>" +
            "<button class='btn btn-secondary' onclick='removeQuestion(this.parentNode)' type='button'>Remove</button>" +
            "</div>" +
            "<div class='btn-group' role='group' aria-label='Basic example'>" +
            "<button class='btn btn-secondary' onclick='addRadioButton()' type='button'>+ Radiobutton</button>" +             
            "</div>";

        document.getElementById('inputquestions').appendChild(div);
    }

这将在第一个 div 内创建多个 div，我现在希望每个 div 单独为它们创建新的 div，但不知道如何操作。为了使新的 div 出现在我按下按钮的 div 内，我的函数 addRadioButton() 必须是什么样子？

Answer 1

在你的函数中addRadioButton()你可以看看event.target.parentElement获取 <div>包含 <button>被点击了。

然后将新元素添加到 <div> 中.