使用JavaScript / jQuery中的按钮点击动态添加div [英] Adding div dynamically using button click in JavaScript / jQuery

问题描述

如何在JavaScript / jQuery中动态添加按钮点击div
我想要div的所有格式都有listing listing_ad job类。

这是我使用jQuery试用的代码。

  $（'＃btnAddtoList'）。click（function（）{var newDiv = $（'< div class =listing listing_ad job >< h4>< a>一些文字< / a>< / h4>< / div>'）; //newDiv.style.background =＃000; document.body.appendChild（newDiv ）;}};  

.listing {border-bottom： 1px solid #ddd;向左飘浮;填充：0 0 5px;位置：相对; width：559px;}。listing：hover {background：＃f5f5f5 none repeat scroll 0 0; border-bottom：1px solid #ddd; cursor：wait;} a：hover {color：＃ff5050;}。subtitle {width：430px; font-weight：normal; font-size：12px; font-family：Arial;颜色：＃7f7f7f;}。info {float：left; margin：10px 15px 5px; min-width：500px;明确：两者;颜色：＃7f7f7f; margin：15px 44px 15px 0; overflow：hidden;}

< script src =https ：//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< button id =btnAddtoList>添加到列表< / button>< ; div class =listing listing_ad job> < H4> < a取代;钻石实习的绝佳机会< / a> < / H4> < div class =subtitle>拉合尔，旁遮普省< / div> < div class =info>这是信息/说明。 < / div>< / div><！ - ************************ - >< div class =listing listing_ad job> < H4> <！ - Src：http://jobs.mitula.pk/internship-program-lahore-jobs - > < a取代;钻石实习的绝佳机会< / a> < / H4> < div class =subtitle>拉合尔，旁遮普省< / div> < div class =info>这是信息/说明。 < / div>< / div>

Jsfiddle： http://jsfiddle.net/mr4rngbL/3/

解决方案

是的，您可以 - 通过将jQuery添加到文档的脚本中，并在 document.ready

中添加代码

  $（function（）{
 $（'＃btnAddtoList'）。click（function（）{
 var newDiv = $（'< div class =listing listing_ad job>< h4>< a>一些文字< / a>< / h4>< / div>'）; 
 //newDiv.style.background =＃ 000; 
 $（'body'）。append（newDiv）; 
}）; 
}）; 
  

示例 http://jsfiddle.net/mr4rngbL/5/

举例说明你在评论中提出的问题： http://jsfiddle.net/mr4rngbL/6/

和 LAST 示例根据您的要求在评论中提供： http://jsfiddle.net / mr4rngbL / 7 /

How do I dynamically add div on button click in JavaScript/jQuery? I want all the formatting of div having class "listing listing_ad job".

This is my code which I tried out, using jQuery.

$('#btnAddtoList').click(function(){
	var newDiv = $('<div class="listing listing_ad job"><h4><a>Some text</a></h4> </div>');
  //newDiv.style.background = "#000";
  document.body.appendChild(newDiv);
});

.listing {
  border-bottom: 1px solid #ddd;
  float: left;
  padding: 0 0 5px;
  position: relative;
  width: 559px;
}

.listing:hover {
  background: #f5f5f5 none repeat scroll 0 0;
  border-bottom: 1px solid #ddd;
  cursor: wait;
}

a:hover {
  color: #ff5050;
}

.subtitle {
  width: 430px;
  font-weight: normal;
  font-size: 12px;
  font-family: Arial;
  color: #7f7f7f;
}

.info {
  float: left;
  margin: 10px 15px 5px;
  min-width: 500px;
  
  clear: both;
  color: #7f7f7f;
  margin: 15px 44px 15px 0;
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnAddtoList">
Add to list
</button>

<div class="listing listing_ad job">
  <h4>
   <a>
  Excellent Opportunity For Internship at Diamond
  </a>
  </h4>
  <div class="subtitle">
  Lahore, Punjab
  </div>
  <div class="info">
  This is Info / Description.
  </div>
</div>
<!-- ************************ -->

<div class="listing listing_ad job">
  <h4>
  <!-- Src: http://jobs.mitula.pk/internship-program-lahore-jobs -->
  <a>
  Excellent Opportunity For Internship at Diamond
  </a>
  </h4>
  <div class="subtitle">
  Lahore, Punjab
  </div>
  <div class="info">
  This is Info / Description.
  </div>
</div>

Jsfiddle: http://jsfiddle.net/mr4rngbL/3/

解决方案

Yes, you can - by added jQuery to the script of the document, and wrpping the code in document.ready

$(function() {
    $('#btnAddtoList').click(function(){
        var newDiv = $('<div class="listing listing_ad job"><h4><a>Some text</a></h4> </div>');
      //newDiv.style.background = "#000";
       $('body').append(newDiv);
    });
});

Example http://jsfiddle.net/mr4rngbL/5/

Example for what you've asked in the comment: http://jsfiddle.net/mr4rngbL/6/

And LAST example based on your request in the comment: http://jsfiddle.net/mr4rngbL/7/

这篇关于使用JavaScript / jQuery中的按钮点击动态添加div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！