[英]Create a div inside div with same class name
I have the following structure of my HTML code: 我有以下HTML代码结构:
<div id="bb-bookblock" class="bb-bookblock">
<div class="bb-item">
<div class="bb-custom-side">
Hello
</div>
<div class="bb-custom-side">
<button id="add">Click Here to add The page</button>
</div>
</div>
<div class="bb-item">
<div class="bb-custom-side">
<p>This is first page</p>
</div>
<div class="bb-custom-side">
<p>Hello</p>
</div>
</div>
<div class="bb-item">
<div class="bb-custom-side">
<p>This is second Page</p>
</div>
<div class="bb-custom-side">
<p>This is last page</p>
</div>
</div>
</div>
When I click on button with id=add
I want to create the a new div after the last bb-item
div with same two div inside it having class name bb-custom-side
. 当我点击
id=add
按钮时,我想在最后一个bb-item
div之后创建一个新的div,其中有两个div,里面有类名bb-custom-side
。
I know how to create the div using createElement
and it a class, but I don't know how to create the sub div inside that newly created div. 我知道如何使用
createElement
创建div并且它是一个类,但我不知道如何在新创建的div中创建sub div。 Can I associate with the last child or similar concept? 我可以与最后一个孩子或类似的概念联系起来吗?
So after click event I want my HTML to be something like this: 所以在点击事件之后我希望我的HTML是这样的:
<div id="bb-bookblock" class="bb-bookblock">
<div class="bb-item">
<div class="bb-custom-side">
Hello
</div>
<div class="bb-custom-side">
<button id="add">Click Here to add The page</button>
</div>
</div>
<div class="bb-item">
<div class="bb-custom-side">
<p>This is first page</p>
</div>
<div class="bb-custom-side">
<p>Hello</p>
</div>
</div>
<div class="bb-item">
<div class="bb-custom-side">
<p>This is second Page</p>
</div>
<div class="bb-custom-side">
<p>This is last page</p>
</div>
</div>
<--Newly created div-->
<div class="bb-item">
<div class="bb-custom-side">
new div
</div>
<div class="bb-custom-side">
new div 2
</div>
</div>
</div>
Use clone()
to create copy of div elements and append it to main div: 使用
clone()
创建div元素的副本并将其附加到主div:
$("#add").click(function(){
var clonedDiv = $(".bb-item:last").clone();
clonedDiv = clonedDiv.find("div.bb-custom-side p").text("This is third Page");
$("#bb-bookblock").append(clonedDiv);
});
NOTE: I just updated text for last div (This is third Page). 注意:我刚刚更新了最后一个div的文本(这是第三页)。 You have to put it in loop to increase number.
你必须把它放在循环中以增加数量。
Try this. 尝试这个。
$('#add').on('click',function(){
$('.bb-item').eq(1).append($('.bb-item:last-child').html());
});
OR
$('#add').click(function(){
$('.bb-item').eq(1).append($('.bb-item:last-child').html());
});
This may not appeal to everyone, but, personally, I tend to like "blank slates" for my cloning. 这可能对每个人都没有吸引力,但就个人而言,我倾向于喜欢克隆的“空白石板”。
If it were me, I would do this: 如果是我,我会这样做:
var $baseItem = $("<div></div>").addClass("bb-item");
var $baseCustomSide = $("<div></div>").addClass("bb-custom-side");
$("#add").click(function(){
var $newItem = $baseItem.clone();
$newItem.append($baseCustomSide.clone().html("your_first_content_here"));
$newItem.append($baseCustomSide.clone().html("your_second_content_here"));
$("#bb-bookblock").append($newItem);
});
Unless there is a really good reason to reuse an existing element, I find you end up having to be a lot more complex to "scrub" the existing content from the clone . 除非有一个非常好的理由重用现有元素,否则我发现你最终要从克隆中“擦除”现有内容要复杂得多。 .
。 .
。 using a blank template always seems more clean to me.
使用空白模板对我来说似乎总是更干净。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.