如何动态创建+插入（追加？？）一个div到一个div容器中？

Question

I would like it to end up as this:

<div id = "container">

<div id = "dynamicallyCreated"></div>

</div> 

I'm pretty sure that this involves either document.createElement or appendChild, but I am not quite sure how to use these to insert the newly created div into the container div.

Edit: sorry, I'm not quite sure how to do the code snippet correctly

Answer 1

I'm pretty sure that this involves either document.createElement or appendChild

Both, actually: :-)

const div = document.createElement("div");
div.id = "dynamicallyCreated";
document.getElementById("container").appendChild(div);

More to explore on MDN : createElement , appendChild

You can also use markup if you prefer via insertAdjacentHTML :

document.getElementById("container").insertAdjacentHTML(
    "beforeend",
    "<div id='dynamicallyCreated'></div>"
);

It can add text in front of, after, at the beginning of, or at the end of an element. (Or if adding text, insertAdjacentText .)

If adding not at the end of the container, you can use insertBefore .

Answer 2

This is how you can do it:

1. Create element using document.createElement()
2. Add attributes (if you wish)
3. Append it to the parent element, using appendChild() .

 var newEl = document.createElement('div'); newEl.setAttribute("id", "newElement"); document.querySelector("#container").appendChild(newEl);

 #container { width: 100px; height: 100px; background: red; } #newElement { width: 50px; height: 50px; background: yellow; }

 <div id="container"> </div>

Another approach for the same can be done using innerHTML property:

 document.querySelector('#container').innerHTML = "<div id='newElement'></div>"

 #container { width: 100px; height: 100px; background: red; } #newElement { width: 50px; height: 50px; background: yellow; }

 <div id="container"> </div>