Создать DIV onclick

Question

У меня есть div и button, которые выложены отлично. Когда я нажимаю кнопку, как я могу снова создать один и тот же div. Я попытался добавить функцию onclick, но я не знаю, как бы реализовать добавление div к ней.

HTML

<div class="note" contenteditable="true"> 
    <span id='close' contenteditable='false' onclick='this.parentNode.parentNode.removeChild(this.parentNode)'> 
     <img src="images/close.png" height="25" width="25" align="right" style="vertical-align: top; float: right"/> 
    </span>Keep clicking this text to select 
</div> 

<a href='#' class='button'>Create Note</a> 

Javascript

<script type="text/javascript"> 
    $(function() { 
     $(".note").resizable(); 
     $(".note").keyup(function() { 
      $(this).css('height', '100%'); 
     }); 
     $(".note").draggable() 
      .click(function() { 
       $(this).draggable({ 
        disabled: false 
       }); 

      }).dblclick(function() { 
       $(this).draggable({ 
        disabled: true 
       }); 
      }); 

    }); 
</script> 

CSS

.note { 
    width: 280px; 
    height: 100px; 
    padding-top: 40px; 
    margin-top: 60px; 
    margin-left: 35px; 
    word-break: break-word; 
    font-family: Note; 
    font-size: 30px; 
    background-image: url("images/stickynote.png"); 
    background-repeat: no-repeat; 
    background-size: cover; 
    z-index: 1; 
} 

.note img{ 
    position:relative; 
    position: absolute; 
    top: 0px; 
    right: 0px; 
} 


.button { 
    position: fixed; 
    top: 160px; 
    margin-left: 44%; 
    border: 1px solid #000000; 
    background: #f2ad24; 
    background: -webkit-gradient(linear, left top, left bottom, from(#ffff92), to(#f2ad24)); 
    background: -webkit-linear-gradient(top, #ffff92, #f2ad24); 
    background: -moz-linear-gradient(top, #ffff92, #f2ad24); 
    background: -ms-linear-gradient(top, #ffff92, #f2ad24); 
    background: -o-linear-gradient(top, #ffff92, #f2ad24); 
    background-image: -ms-linear-gradient(top, #ffff92 0%, #f2ad24 100%); 
    padding: 13px 26px; 
    -webkit-border-radius: 16px; 
    -moz-border-radius: 16px; 
    border-radius: 16px; 
    -webkit-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0; 
    -moz-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0; 
    box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0; 
    text-shadow: #7ea4bd 0 1px 0; 
    color: #000000; 
    font-size: 35px; 
    font-family: Note; 
    text-decoration: none; 
    vertical-align: middle; 
} 

.button:hover { 
    border: 1px solid #0a3c59; 
    text-shadow: #1e4158 0 1px 0; 
    background: #f08d24; 
    background: -webkit-gradient(linear, left top, left bottom, from(#ffe194), to(#f08d24)); 
    background: -webkit-linear-gradient(top, #ffe194, #f08d24); 
    background: -moz-linear-gradient(top, #ffe194, #f08d24); 
    background: -ms-linear-gradient(top, #ffe194, #f08d24); 
    background: -o-linear-gradient(top, #ffe194, #f08d24); 
    background-image: -ms-linear-gradient(top, #ffe194 0%, #f08d24 100%); 
    color: #212121; 
} 

.button:active { 
    text-shadow: #1e4158 0 1px 0; 
    border: 1px solid #0a3c59; 
    background: #f09424; 
    background: -webkit-gradient(linear, left top, left bottom, from(#ffe194), to(#f08d24)); 
    background: -webkit-linear-gradient(top, #ffe194, #f09424); 
    background: -moz-linear-gradient(top, #ffe194, #f09424); 
    background: -ms-linear-gradient(top, #ffe194, #f09424); 
    background: -o-linear-gradient(top, #ffe194, #f09424); 
    background-image: -ms-linear-gradient(top, #ffe194 0%, #f09424 100%); 
    color: #fff; 
} 

Answer 1

Вот простой пример того, как вы можете использовать jQuery сделать то, что это вы пытаетесь сделать. Очевидно, что это точно не соответствует вашим потребностям, но даст вам основу для изучения того, как это может работать. Вероятно, вам захочется посмотреть на jQuery Clone method и jQuery AppendTo method.

CSS

.note { 
    margin-bottom: 10px; 
    background-color: yellow; 
    width: 100px; 
    height: 100px; 
} 

JQuery

$(function() { 
    $('button').on('click', function() { 
     $('.note:last').clone().appendTo('.wrapper'); 
    }); 
}); 

HTML

<div class="wrapper"> 
    <div class="note">Content in div</div> 
</div> 
<button>Add note</button> 

JSFiddle Example

Answer 2

ли вы имеете в виду что-то вроде этого?

$(window).ready(function(){ 
 
    $('.button').click(function(e){ 
 
     e.preventDefault(); 
 
     var html = $('.template').html(); 
 
     $('#notes').append('<div style="position:relative;">'+html+'<div>'); 
 
    }); 
 
})

.note img{ 
 
position:relative; 
 
position: absolute; 
 
top: 0px; 
 
right: 0px; 
 
} 
 

 

 
.button { 
 
position: fixed; 
 
top: 160px; 
 
margin-left: 44%; 
 
border: 1px solid #000000; 
 
background: #f2ad24; 
 
background: -webkit-gradient(linear, left top, left bottom, from(#ffff92), to(#f2ad24)); 
 
background: -webkit-linear-gradient(top, #ffff92, #f2ad24); 
 
background: -moz-linear-gradient(top, #ffff92, #f2ad24); 
 
background: -ms-linear-gradient(top, #ffff92, #f2ad24); 
 
background: -o-linear-gradient(top, #ffff92, #f2ad24); 
 
background-image: -ms-linear-gradient(top, #ffff92 0%, #f2ad24 100%); 
 
padding: 13px 26px; 
 
-webkit-border-radius: 16px; 
 
-moz-border-radius: 16px; 
 
border-radius: 16px; 
 
-webkit-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0; 
 
-moz-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0; 
 
box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0; 
 
text-shadow: #7ea4bd 0 1px 0; 
 
color: #000000; 
 
font-size: 35px; 
 
font-family: Note; 
 
text-decoration: none; 
 
vertical-align: middle; 
 
} 
 
.button:hover { 
 
border: 1px solid #0a3c59; 
 
text-shadow: #1e4158 0 1px 0; 
 
background: #f08d24; 
 
background: -webkit-gradient(linear, left top, left bottom, from(#ffe194), to(#f08d24)); 
 
background: -webkit-linear-gradient(top, #ffe194, #f08d24); 
 
background: -moz-linear-gradient(top, #ffe194, #f08d24); 
 
background: -ms-linear-gradient(top, #ffe194, #f08d24); 
 
background: -o-linear-gradient(top, #ffe194, #f08d24); 
 
background-image: -ms-linear-gradient(top, #ffe194 0%, #f08d24 100%); 
 
color: #212121; 
 
} 
 
.button:active { 
 
text-shadow: #1e4158 0 1px 0; 
 
border: 1px solid #0a3c59; 
 
background: #f09424; 
 
background: -webkit-gradient(linear, left top, left bottom, from(#ffe194), to(#f08d24)); 
 
background: -webkit-linear-gradient(top, #ffe194, #f09424); 
 
background: -moz-linear-gradient(top, #ffe194, #f09424); 
 
background: -ms-linear-gradient(top, #ffe194, #f09424); 
 
background: -o-linear-gradient(top, #ffe194, #f09424); 
 
background-image: -ms-linear-gradient(top, #ffe194 0%, #f09424 100%); 
 
color: #fff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="notes"> 
 
<div class="template" style="position:relative;"> 
 
    <div class="note" contenteditable="true"> <span id='close' contenteditable='false' onclick='this.parentNode.parentNode.removeChild(this.parentNode)'> 
 
     <img src="images/close.png" height="25" width="25" align="right" style="vertical-align: top; float: right"/> 
 
    </span>Keep clicking this text to select</div> 
 
    </div> 
 
</div> 
 

 
<a href='#' class='button'>Create Note</a>