Как я могу дублировать div onclick с javascript? - PullRequest
Новая
       21

Как я могу дублировать div onclick с javascript?

21 голосов
/ 13 декабря 2010

Я хочу, чтобы div дублировался при нажатии кнопки.Я хоть что-то вроде этого;но это не работаетКто-нибудь может мне помочь?

HTML 

<div id="duplicater"> 
duplicate EVERYTHING INSIDE THIS DIV
</div>

JAVASCRIPT 

function duplicate()
{
var div = duplicate("div");
    div.id = "duplicater";
div.appendChild(duplicate("duplicater"));
}

Ответы [ 3 ]

39 голосов
/ 13 декабря 2010

Вы создаете бесконечную рекурсию! 

function duplicate()
{
    var div = duplicate("div");

Функция вызывает себя снова и снова. Используйте cloneNode():

HTML: 

<div id="duplicater0"> 
duplicate EVERYTHING INSIDE THIS DIV
</div>

JavaScript: 

var i = 0;

function duplicate() {
    var original = document.getElementById('duplicater' + i);
    var clone = original.cloneNode(true); // "deep" clone
   clone.id = "duplicater" + ++i; // there can only be one element with an ID
    clone.onclick = duplicate; // event handlers are not cloned
    original.parentNode.appendChild(clone);
}

Рабочая ДЕМО

или без идентификаторов: 

function duplicate() {
    var clone = this.cloneNode(true); // "deep" clone
    clone.id = ""; // there can only be one element with an ID
    clone.onclick = duplicate; // event handlers are not cloned
    this.parentNode.appendChild(clone);
}

Обновление:

Если вы хотите клонировать div по нажатию кнопки, вы можете использовать немного другую версию:

HTML: 

<button id="button" onclick="duplicate()">Click me</button>
<div id="duplicater"> 
    duplicate EVERYTHING INSIDE THIS DIV
</div>

JavaScript: 

var i = 0;
var original = document.getElementById('duplicater');

function duplicate() {
    var clone = original.cloneNode(true); // "deep" clone
    clone.id = "duplicater" + ++i;
    // or clone.id = ""; if the divs don't need an ID
    original.parentNode.appendChild(clone);
}

Если вы не в форме, вы должны использовать <button> вместо <input type="button">.

Рабочая ДЕМО 2

0 голосов
/ 30 марта 2015 
<table>
<tr>
<td>
<div id="duplicater"> 
    duplicate EVERYTHING INSIDE THIS DIV
</div>
</td>
</tr>
</table>
<button id="button">Click me</button>

$("#button").on('click', function (e) {
    e.preventDefault();
    var $self = $(this);
    $self.before($self.prev('table').clone());
});
0 голосов
/ 13 декабря 2010

Можете ли вы изменить div на класс? Если это так, то это может работать для вас: 

# application.js
$(function(){
  $('.photo:last').after('<a href="#" id="new_resource">Add another image<a/><br/>');

  $('a[href=#]').click(function(){
    $(this).before($('.photo:last').clone());

    $('.photo:last input').each(function(){
      $(this).removeAttr("value");
    });

    $('.photo:last input[type=hidden]').remove();

    return false;
  });
})

#html
<div class="photo"
  <label>label</label>  
  <input type="file"></input>
</div>

Редактировать код здесь :

...