javascript - onclick 复制一个 div 但将 div 放在某个位置

标签 javascript jquery html

当我按下某个按钮时,我试图复制一个div,除了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>

最佳答案

为下一个节点添加一个id并使用insert before来保存乘法

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>

关于javascript - onclick 复制一个 div 但将 div 放在某个位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28036354/

相关文章:

javascript - fullCalendar动态事件点击行为

javascript - JavaScript 中的复杂字符串匹配

html - 自动调整 <ul> 的高度以适应内容

javascript - 用于 Javascript 的 .tiff 库

javascript - 从另一个选择框中删除选定的选项

javascript 函数禁用和/或与 fancybox 冲突

PHP 从 DELETE 请求中获取数据

javascript - Chrome 扩展 - 在浏览器上加载 js 之前获取 Html DOM

javascript - 如何循环访问 AJAX 加载的复选框?

javascript - meteor 的 restrictCreationByEmailDomain 选项如何工作?