javascript - Insert div within div

Question

I'm trying to create and insert a div within an already dynamically created div:

var parentDiv = document.createElement('div');
var inner = "stuff";
parentDiv.innerHTML = inner;
someRootDiv.appendChild(parentDiv);

var childDiv = document.createElement('div');
inner = "more stuff";
childDiv.innerHTML = inner;
parentDiv.appendChild(childDiv);

But the child div isn't displayed within the parent div, it's displayed below it as if it's just a following div. Where am I going wrong?

score 2 · Accepted Answer

您发布的代码确实将一个 div 放在另一个 div 中（您的代码演示）。您是指它们不会并排对齐的事实，跨度会这样吗？

这是因为 div 是块元素，而 span 是内联的。你可以通过改变它们在 CSS 中的显示模式来改变它：

display: inline;

或者只是切换到使用跨度。

score 0 · Accepted Answer

尝试这个

var parentDiv = document.createElement('div');
var inner = "stuff";
parentDiv.innerHTML = inner;
someRootDiv.appendChild(parentDiv);

var childDiv = document.createElement('div');
inner2 = "more stuff";
childDiv.innerHTML = inner2;
parentDiv.appendChild(childDiv);

演示

score -1 · Accepted Answer

几乎不需要更改。

尝试这个：

<script>
function fun(){
var parentDiv = document.createElement('div');
var inner = "stuff data";
parentDiv.innerHTML = inner;
document.getElementById("maindiv").appendChild(parentDiv);

var childDiv = document.createElement('div');
inner = "more stuff inside parent Div";
childDiv.innerHTML = stuff;
parentDiv.appendChild(childDiv);

}
</script>

体内标签：-

<body onload="fun()">
<div id="maindiv">

</div>
</body>

它工作正常。希望它会帮助你。

javascript - Insert div within div

3 回答 3

Related

Reference