Question

＆＃13;

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);
      }

＆＃13;

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;

  }

＆＃13;

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>

＆＃13;

我是rails的新手，我尝试在点击中添加div部分并在视图中显示。我尝试使用此代码但仍无效，控制台中的错误为cannot read property clone node of null。我尝试了不同的方法使它工作，但我仍然失败了。这是下面的HTML文件，JS文件和CSS文件，错误为cloneNode undefined。 CSS和HTML文件正在运行，但JQuery没有

Answer 1

现在设置它的方式是你正在执行复制函数而不是将它附加到事件处理程序，以便稍后当有人点击btn div时它可以执行它。 / p>

所以改变这个

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

向

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

您的输入也附有相同的事件，因此我建议您删除其中一个。

您的另一个问题是，上述答案指出您将克隆附加到无效元素。

如果您要将其附加到middle-section，请将其更改为：

original.appendChild(clone);

或者，如果您要将其附加到body，请将其更改为：

document.body.appendChild(clone);

Answer 2

改变这个：

original.body.appendChild(clone);

对此：

original.appendChild(clone);

还有：

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

对此：

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

这里是Codepen example。

Answer 3

jquery不支持中间rails标签。因此无法克隆或附加div部分。标准方法是使用rails嵌套属性概念rails cocoon gem support to this task

如何使用按钮单击添加div部分并将其显示在视图上

3 个答案: