如何通过点击按钮来添加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部分，在视图

回答

相关问题