Дублируйте div onclick, но поместите div в определенную позицию

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

document.getElementById('and-button').onclick = duplicate; 

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

    function duplicate() { 
      var clone = original.cloneNode(true); 
      clone.id = "filter" + ++i; 
      original.parentNode.appendChild(clone); 
    }

HTML:

<!DOCTYPE html> 
    <html> 
    <head> 
    </head> 
    <body> 
     <div> 
      other content etc 
     </div> 

     <a href=#! id="filter"> 
      some content 
     </a> 

     /*here is where i would like my duplicated div to go*/ 

     <div class="filter-nav"> 
      <input type="button" onclick="" value="AND" id="and-button"> 
      <input type="button" onclick="" value="OR" id="or-button"> 
     </div> 

     <div> 
      other content etc 
     </div> 

     /*here is where it is going*/ 

     <footer> 
      footer content 
     </footer> 
    </body> 
    </html>

источник

2015-01-20 charlotteg

FYI ваш '' тег закрывается ненадлежащим образом. И почему тег jQuery? Я не вижу. – j08691

Отмечено и исправлено было просто повторная ошибка. Потому что я не уверен, как добавить в позицию, которую я желаю, и подумал, что мне, возможно, понадобится использовать jQuery, чтобы добраться туда, я очень новичок в этом. – charlotteg

добавлен идентификатор к следующему узлу и используется вставка перед тем, чтобы сохранить умножение

document.getElementById('and-button').onclick = duplicate; 
 

 
    var i = 0; 
 
    var original = document.getElementById('filter'); 
 
    var beforeElem = document.getElementById('filter-nav'); 
 
    function duplicate() { 
 
      var clone = original.cloneNode(true); 
 
      clone.id = "filter" + ++i; 
 
      original.parentNode.insertBefore(clone, beforeElem); 
 
    }

<div> 
 
      other content etc 
 
     </div> 
 

 
     <a href=#! id="filter"> 
 
      some content 
 
     </a> 
 

 
     /*here is where i would like my duplicated div to go*/ 
 

 
     <div class="filter-nav" id="filter-nav"> 
 
      <input type="button" onclick="" value="AND" id="and-button"> 
 
      <input type="button" onclick="" value="OR" id="or-button"> 
 
     </div> 
 

 
     <div> 
 
      other content etc 
 
     </div> 
 

 
     /*here is where it is going*/ 
 

 
     <footer> 
 
      footer content 
 
     </footer>

источник

2015-01-20 01:35:05 Billy

Ooo за исключением теперь вместо дублирования одного оригинала, он дублирует два новых, затем 4, затем 8, затем 16 и т. Д. Любая идея, как это исправить? – charlotteg

дайте мне мо ... – Billy

Отлично! Спасибо, кучи @ Билли. – charlotteg

Дублируйте div onclick, но поместите div в определенную позицию

ответ

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