在按钮单击时在另一个 div 内添加带有内容的 div

Question

I have a simple dropdown and a checkbox as children of a div. I am trying to replicate this div when a user clicks on the "Add Another" button.

This is my div:

<div id="dominantDiv">
    <div id="childDiv">
        <div>
            Dominant Item
            @Html.CheckBox("checkbox", true, new { @onClick = "toggleSelect()" })
            @Html.Hidden("hidCheck")
        </div>
        <div>
            @Html.DropDownList("Drop", (IEnumerable
                           <SelectListItem>)TempData["Drop"], new { @id = "enableDrop", required = true })
            @Html.Hidden("hidSelection")
            <button type="button" id="addDominantBtn" onclick="addDominant()">Add Another</button>
        </div>
    </div>
</div>

I've already tried using appendChild

function addDominant() {
        $("#dominantDiv").appendChild($("#childDiv"));
    }

to get the whole div and re-add it to its parent but I get the error

Uncaught TypeError: $(...).appendChild is not a function
    at addDominant
    at HTMLButtonElement.onclick

Answer 1

You mean append .

And also, you need clone to create a new child element.

function addDominant() {
  $("#dominantDiv").append($("#childDiv").clone());
}