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

问题描述

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

我如何修改这个代码，而不是隐藏的div中的渐变，
我可以添加新的div到DOM

 
 jQuery（function（）{//添加答案
 
 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）; 
} 
 
}）; 
 
}）; 
 

---

好的，现在我已经整理了，我还有一个问题， / p>

如果点击一个按钮，我有另一个功能可以删除插入的div。
现在不起作用，额外的div没有被加载到pageload的dom中。
我如何触发这个功能来删除这些？

jQuery（function（）{//隐藏答案

$ b $ {pre> jQuery（。destroy_answer）点击（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）;

}）;


解决方案

如何在最后一个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无论你在这里输入什么都会进入div bla bla $ sessiondata; 
？> 
  

编辑

好​​的，尝试这样： / p>

 
 jQuery（function（）{//添加答案
 
 jQuery（。add_answer （）{
 if（count> =4）{
 alert（'Only 4 Answers Allowed'）; 
} else {
 var count = $（this） attr（alt）; 
 count ++; 
 $（'。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屋！