Question

我正在尝试在已经动态创建的div中创建并插入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);

但是子div不显示在父div中，它显示在它下面，好像它只是一个跟随div。我哪里错了？

Answer 1

您发布的代码确实将div放在另一个（Demo of your code）中。你是指他们没有并排排列的事实，the way spans would？

这可能是因为div是块元素，而spans是内联的。您可以通过在CSS中更改其显示模式来改变它：

display: inline;

或只是切换到使用跨度。

Answer 2

试试这个

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);

DEMO

Answer 3

几乎不需要更改。

试试这个：

<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>

它运作正常。希望它可以帮到你。

在div中插入div

3 个答案: