如何使用 jQuery 添加 DOM 元素？答案

【问题标题】：How do I add a DOM element with jQuery?如何使用 jQuery 添加 DOM 元素？
【发布时间】：2010-09-28 13:46:25
【问题描述】：

我目前正在使用一个函数来显示隐藏的 div.a_type

如何修改此代码，而不是在隐藏的 div 中淡出，我可以将新的 div 添加到 DOM 中

jQuery(function(){ // 添加答案 jQuery(".add_answer").click(function(){ 如果（计数> =“4”）{ alert('只允许 4 个答案'); }别的{ var count = $(this).attr("alt"); 计数++； $(this).parents('div:first').find('.a_type_'+count+'').fadeIn(); $(this).attr("alt", count); } }); });

好的，既然我已经解决了这个问题，我还有一个问题，

如果单击按钮，我还有另一个功能可以删除插入的 div。现在无法在页面加载时将其他 div 加载到 dom 中。我现在如何触发删除这些功能？

jQuery(function(){ // 隐藏答案

jQuery(".destroy_answer").click(function(){
  $(this).parents("div:first").fadeOut(function (){ $(this).remove() });
   var count = $(this).parents('div:first').parents('div:first').find('.add_answer').attr("alt");
   count--;
   $(this).parents('div:first').parents('div:first').find('.add_answer').attr("alt", count);

});

});

【问题讨论】：

快速说明，虽然您可以打印 HTML，但您不能通过 javascript 打印 PHP，因为 PHP 是一个预处理器。
很高兴知道...您如何建议我在我要打印的选择中打印 php 会话数据？
使用 AJAX 获取 php 会话数据（jQuery 有 AJAX 工具，我将更新我的分析器以使用它们。

标签： javascript jquery dom

【解决方案1】：

在最后一个 div 之后添加怎么样。

$('.a_type:last').insertAfter('<div class="a_type">content</div>');

编辑
您可以通过 AJAX 调用 somefile.php 获取信息，然后 somefile 应该在 div 中返回您想要的内容：

$.get('path/to/somefile.php', function(data){
 $('.a_type:last').insertAfter('<div class="a_type">' + data + '</div>');
});

Somefile.php 应该是这样的：

<?php
 session_start();
 $sessiondata = $_SESSION['data'];
 echo "Whatever you type here will come inside the div bla bla $sessiondata";
?>

编辑
好的，试试这个：

jQuery(function(){ // 添加答案 jQuery(".add_answer").click(function(){ 如果（计数> =“4”）{ alert('只允许 4 个答案'); }别的{ var count = $(this).attr("alt"); 计数++； $('.a_type_'+count-1+'').insertAfter(' 将内容放回此处'); $(this).attr("alt", count); } }); });

如果您仍然需要它，只需混入 AJAX。

【讨论】：

insertAfter 不起作用，所以我按照您之前的建议尝试了“after”，它起作用了。谢谢
嗯，好吧，很奇怪，我虽然是 insertAfter，但并不重要，如果这是您使用的分析器，那么您应该接受它。

【解决方案2】：

如果单击按钮，我还有另一个功能可以删除插入的 div。现在无法在页面加载时将其他 div 加载到 dom 中。我现在如何触发删除这些的功能？

您有三个选项来解决您最近遇到的问题。

您可以使用 liveQuery，这是一个 jQuery 插件，可在添加 DOM 元素时将事件处理程序重新应用于它们。注意：此插件仅在您使用原生 jQuery DOM 附加/前置功能（append/prepend/after/before/insertBefore/insertAfter 等）时有效。
或者，您可以在添加新元素时手动重新应用处理程序...（不是最佳选择）
第三个，我认为最好的选择是利用事件委托的强大功能。您所做的是将事件处理程序附加到任何父项，例如，如果您要动态地将列表项添加到无序列表，而不是不断地将事件处理程序重新应用于每个添加的项目，您可以简单地附加事件处理程序到父级，然后找到事件的目标：
```
$('ul').click(function(e){
    var target = e ? e.target : window.event.srcElement;
    if(target.nodeName.toLowerCase() === 'li') {
        // Do Stuff...
    }
})
```

【讨论】：