如何使用 jQuery 添加 DOM 元素? [英] How do I add a DOM element with jQuery?

问题描述

我有一个当前用于显示隐藏 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");数数 - ;$(this).parents('div:first').parents('div:first').find('.add_answer').attr("alt", count);});

});

解决方案

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

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

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

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

Somefile.php 应该是这样的:

编辑
好的，试试这个:

<前>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 混入即可.

I have a funciton that I am currently using to show a hidden div.a_type

How can I modify this code so that instead of fading in the hidden div, I can add the new div to the DOM

jQuery(function(){   // Add Answer

    jQuery(".add_answer").click(function(){
      if(count >= "4"){
        alert('Only 4 Answers Allowed');
        }else{
      var count = $(this).attr("alt");
      count++;
      $(this).parents('div:first').find('.a_type_'+count+'').fadeIn();
      $(this).attr("alt", count);
    }

    }); 

});

---

Ok, now that i have this sorted out, i have one more question,

I have another function that removes the inserted div's if a button is clicked. It's not working now that the additional divs are not loaded into the dom on pageload. How can i trigger the function to remove these now?

jQuery(function(){ // Hide Answer

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

}); 

});

解决方案

How about adding it after the last div.

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

edit
You can get the information through a AJAX call to somefile.php, somefile should then return the content you want in the div:

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

Somefile.php should be something like this:

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

edit
Okay, try this:

jQuery(function(){ // Add Answer

jQuery(".add_answer").click(function(){
  if(count >= "4"){
    alert('Only 4 Answers Allowed');
    }else{
  var count = $(this).attr("alt");
  count++;
  $('.a_type_'+count-1+'').insertAfter(' 
       Place content back here');
  $(this).attr("alt", count);
}

});

});

Just mix in the AJAX if you still need it.

这篇关于如何使用 jQuery 添加 DOM 元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！