如何通過點擊按鈕來添加DIV部分，在視圖

js file 
 

 
    var i = 0; 
 
     var original = document.getElementById('middle-section'); 
 
     document.getElementById('btn').onclick = duplicate(); 
 
     function duplicate() { 
 
      var clone = original.cloneNode(true); // "deep" clone 
 
      clone.id = "middle-section" + ++i; 
 
      // or clone.id = ""; if the divs don't need an ID 
 
      original.body.appendChild(clone); 
 
     }

css file 
 

 
.middle-section-name{ 
 
     position: absolute; 
 
     left: 500px; 
 
     top: 850px; 
 
     width: 200px; 
 
     height: 40px; 
 
     background-color: #aaaaaa; 
 
     border: 2px hidden; 
 
    } 
 

 
    .middle-section-edit{ 
 
     position: absolute; 
 
     left: 700px; 
 
     top: 840px; 
 
    } 
 

 
    .middle-section-edit img{ 
 
    width: 20px; 
 
    margin: 5px; 
 

 
    }

view 
 

 
<body> 
 
<div class="container-fluid"> 
 
    <div class="header"> 
 
    <p>header</p> 
 
    </div> 
 
</div> 
 
<div class="container"> 
 

 
    <div class="logo"> 
 
    <div class="logo-part"> 
 
     <p>logo</p> 
 
    </div> 
 
    <div class="logo-name"> 
 
     <P>logo name</P> 
 
    </div> 
 
    <div class="logo-edit"> 
 
     <%= image_tag 'edit-logo.png'%> 
 
    </div> 
 
    </div> 
 

 
    <div class="top-main-section"> 
 
    <div class="top-main-section-area"> 
 
     <p>top main section</p> 
 
    </div> 
 
    <div class="top-main-section-edit"> 
 
     <%= image_tag 'settings-logo.png'%> 
 
    </div> 
 
    </div> 
 

 
    <div class="top-banner-section"> 
 
    <div class="top-banner-section-area"> 
 
     <p>top banner section</p> 
 
    </div> 
 
    <div class="top-banner-section-edit"> 
 
     <%= image_tag 'settings-logo.png'%> 
 
    </div> 
 
    </div> 
 

 

 
    <div class="middle-section" id="middle-section"> 
 
    <div class="middle-section-name"> 
 

 
    </div> 
 

 
    <div class="middle-section-edit"> 
 
     <%= image_tag 'settings-logo.png'%> 
 
    </div> 
 

 
    <div class="middle-section-area"> 
 
     <p>carosel</p> 
 

 

 
    </div> 
 

 

 
    </div> 
 

 

 
</div> 
 

 
<input type="button" value="click" id="btn" onclick="duplicate()"/> 
 
</body>

我新的軌道顯示它，我嘗試添加DIV部分上點擊顯示在view.I嘗試與此代碼但仍然無法正常工作，控制檯中的錯誤爲cannot read property clone node of null。我嘗試了不同的方式來使它工作，但我仍然失敗了。下面是HTML文件，JS文件和下面的CSS文件，錯誤號爲cloneNode undefined。 CSS和HTML文件正在工作，但JQuery不會

來源

2017-10-19 Thilanka Umayanga Jayarathna

jquery不支持中間導軌標記。因此無法克隆或附加div部分。標準的方式是使用rails嵌套的屬性概念rails cocoon gem support to this task

來源

2017-10-30 05:11:53

你現在設置的方式是執行你的重複函數，而不是將它附加到事件處理程序，以便稍後當有人點擊時它可以執行它在btn股利。

所以改變這種

document.getElementById('btn').onclick = duplicate();

進入

document.getElementById('btn').onclick = duplicate;

你也有相同的情況下連接到您的輸入，所以我建議刪除其中的一個。

您的其他問題正如上面的答案指出，您將您的克隆附加到無效元素。

如果你想將其追加到middle-section然後將其更改爲：

original.appendChild(clone);

或者，如果你想將其追加到body，將其更改爲：

document.body.appendChild(clone);

來源

2017-10-19 09:12:35 linasmnew

這對我來說不起作用。 '同樣的問題在這裏'不能讀取屬性cloneNode是未定義的' –

更改此：

對此：

original.appendChild(clone);

而且也：

document.getElementById('btn').onclick = duplicate();

要這樣：

document.getElementById('btn').addEventListener('click', function() { 
    duplicate(); 
});

這裏有一個Codepen example。

來源

2017-10-19 09:18:18 delinear

同樣的問題。這不起作用 –

檢查我發佈的codepen示例 - 它適用於我，它是否適合您？ – delinear

它在codepen示例中打印「carosel」三次。但我的控制檯給出無法讀取屬性EventListner null和相同的問題。我想用顏色和圖像再次重複此div部分 –

如何通過點擊按鈕來添加DIV部分，在視圖

回答

相關問題