javascript jquery添加新的div onclick
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16321748/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery add new div onclick
提问by serdar
I have a list of div
我有一个 div 列表
<li class="comment">
<div class="comment-body" id="comment-body">
<div class="comment-author vcard">
<div class="lightbox-photo">
<a class="image-overlay" href='<%# "Foto/profil/foto_buyuk/" + Eval("Yorum_Profil_Foto_Buyuk") %>' data-rel="prettyPhoto" title='<%# Eval("Yorum_UserName")%>'><img src='<%# "Foto/profil/foto_kucuk/" + Eval("Yorum_Profil_Foto_Kucuk") %>' alt='<%# Eval("Yorum_UserName")%>' class="avatar" />
</a>
</div>
<cite class="fn"><asp:HyperLink ID="linkProfil" runat="server" Text='<%# Eval("Yorum_UserName")%>' NavigateUrl='<%# "~/profil.aspx?user_id="+Eval("User_ID") %>'></asp:HyperLink></cite>
<cite class="fn-time"></cite>
</div>
<p><%# Eval("Yorum_Text")%></p>
</div>
</div>
</div>
</li>
I want to add a new div on div click. I wrote jquery codes but it doesnt work.
我想在 div 单击时添加一个新的 div。我写了 jquery 代码，但它不起作用。
function addcommentdiv () {
var NewContent = '<div class=""><input name="name" type="text" id="name" size="20" value="" style="height:20px; margin-top:10px; width:480px;margin-left:90px; font-size:14px;" /></div>'
$('.comment-body').click(function () {
var index2 = $('.comment-body').index(this);
if (NewContent != '') {
$('.comment-body').eq(index2).after(NewContent);
NewContent = '';
}
else {
$('.comment-body').eq(index2).next().toggle();
}
});
};
Why it doesn't work or how can I add a new div to clicked div below (as twitter reply)? Before I wrote some code. It was working but there was a problem: it was working for one div only.
为什么它不起作用，或者我如何向下面单击的 div 添加一个新 div（作为 twitter 回复）？在我写一些代码之前。它正在工作，但有一个问题：它仅适用于一个 div。
回答by Arun P Johny
Try
尝试
function addcommentdiv () {
var NewContent = '<div class="reply"><input name="name" type="text" id="name" size="20" value="" style="height:20px; margin-top:10px; width:480px;margin-left:90px; font-size:14px;" /></div>'
$('.comment-body').click(function () {
var $this = $(this), $reply = $this.next('.reply');
if ($reply.length) {
$reply.toggle();
} else {
$(NewContent).insertAfter($this);
}
});
};
Demo: Fiddle
演示：小提琴
回答by user856358
I'm not too familiar with jquery, but you can add a new div through javascript
我对jquery不太熟悉，但是你可以通过javascript添加一个新的div
var NewContent = '<div class=""><input name="name" type="text" id="name" size="20" value="" style="height:20px; margin-top:10px; width:480px;margin-left:90px; font- size:14px;" /></div>'
$('.comment-body').click(function () {
var newdiv=document.creatElement(NewContent);
var toattach= document.getElementById('comment-body');
toattach.appendchild(newdiv) ;
}
else {
$('.comment-body').eq(index2).next().toggle();
}
});
});
