Question

有没有办法将子div添加到父div中。子div仍然相同（没有更改）但父div的内容是可变的。父div包含自动的子div，如CSS div :: before，但整个div不仅仅是文本。

基本上每个父母自动生成相同的孩子。

如何通过CSS制作？（或JS）

Answer 1

我不完全清楚问题是什么，但听起来你正在寻找像这样的JS代码：

var child = document.createElement('div');
child.innerHTML = '<p>Child!</p>';

var parent = document.createElement('div');
parent.innerHTML = '<p>Parent 1</p>';

parent.appendChild(child);

希望这有点帮助，或者至少不会增加混乱。

Answer 2

不确定我理解你的问题所以我会给你一个解决方案，然后你评论你的要求。

您可以让div包含另一个子div，该div位于父级内部，但在向父级添加更多内容时不会更改。

这是一个小提琴：

http://jsfiddle.net/1fohx3qf/

.parent {
border:2px solid black;
padding:5px;
position:relative;
width:124px;
height:120px;
}

.child {
border:2px solid red;
padding:30px;
position:absolute;
bottom:5px;
right:10px;
}

Answer 3

CSS无法生成内容（因此）它只能设置样式。

如果HTML中不存在该元素，则不会发生任何事情。

可以使用伪元素添加“伪内容”，但这些伪元素的主要目的是增强而不是添加“内容”。它们也不能包含HTML。

在这种情况下，可以使用带有bg图像的伪元素，因为这基本上是样式化的。

JSfiddle Demo

div {
    height:250px;
    width:250px;
    display: inline-block;
    margin: 25px;
    position: relative;    /* required */

}
div:after {
    content:"";
    /* required */
    position: absolute;
    bottom:25px;
    right:25px;
    background-image: url(http://www.webdevelopersnotes.com/how-do-i/thumbs/shortcut-arrow.jpg);
    height:75px;
    width:75px;
    background-size:cover;
}

.one {
    background: red;
    width:300px;
}

.two {
    background: lightblue;
    height:300px;
}

<div class="one"></div>
<div class="two"></div>

如何自动将子div包含在父div中？

3 个答案: