Как сделать div, нажимая кнопку ввода каждый раз.?

-4

Недавно добавленный DIV должен быть размещен в верхней части тела и старше DIV должны идти под добавляемым DIVКак сделать div, нажимая кнопку ввода каждый раз.?

 
_________ 
|   | 
| Newly | 
| added | 
|   | 
|_________| 

_________ 
|   | 
| second | 
| last | 
| added | 
|_________| 

_________ 
|   | 
| third | 
| last | 
| added | 
|_________|

источник

2015-08-20 Iony

Пожалуйста, прочитайте, как задать вопрос на SO спросите question..asking вопрос таким образом не решит вашу проблему, но увеличит потерю на SO .. –

** [Fiddle] (https://jsfiddle.net/Guruprasad_Rao/bwthwssz/) ** –

[How задать вопрос ** хороший ** вопрос] (http://stackoverflow.com/help/how-to-ask) – 099

Без JQuery вы можете сделать это:

HTML:

<div id="container"> 
</div> 
<div id="div-creator"> 
    Click me! 
</div>

JS:

var button = document.querySelector('#div-creator'); 
var container = document.querySelector('#container'); 

var onClickButton = function() { 
    if(!this.count) this.count = 0; 
    this.count++; 

    var newDiv = document.createElement('div'); 
    newDiv.innerHTML = "It's a me! " + this.count; 
    if(container.childElementCount === 0) { 
     container.appendChild(newDiv); 
    } else { 
     container.insertBefore(newDiv, container.childNodes[0]); 
    } 
} 

button.addEventListener('click', onClickButton);

Демо: here

источник

2015-08-20 11:51:15 Lauromine

Вы можете сделать это с помощью .prepend() для дивы препенда после тела

Отъезда фрагмент кода ниже

$(function(){ 
 

 
    $('button').on('click',function(){ 
 
    var count = $(this).data('button'); 
 
    if(!count){ 
 
     $('body').prepend('<div class=customdivs>DIV:'+1+'<div>'); 
 
     $(this).data('button',1) 
 
    }else{ 
 
     $('body').prepend('<div class=customdivs>DIV:'+(count+1)+'<div>'); 
 
     $(this).data('button',count+1); 
 
    } 
 
    }) 
 
});

.customdivs{border:1px solid #ccc; width:60px;height:30px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
    <button>Make Div</button> 
 
</body>

источник

2015-08-20 11:45:18 joyBlanks

Как сделать div, нажимая кнопку ввода каждый раз.?

ответ

Смежные вопросы