jQuery 使用元素创建 Div

Question

我使用 document.createElement 创建一个带有如下类的 div:

var newDiv = document.createElement("div");
newDiv.className = 'note';

但我不知道如何让 div 具有 .note 的 html 元素，每次我触发该 block 时，无论注释数量如何，它都会加倍!因此，如果有 4 个注释，它将创建 4 个注释，从而产生 8 个注释:((.note 是我正在复制的 div)

完整代码如下:

HTML:

<div class="note">
  <input id="subject" value="SUBJECT"></input>
  <div class="time"></div>
  <hr>
  <ul>
      <li>
          <input type="text" value="TYPE HERE"></input>
      </li>
  </ul>
</div>

CSS:

.note {
    padding:10px;
    background-color:#FFFF19;
    height:400px;
    width:400px;
    border-radius:1px;
    display:inline-block;
    margin:5px;
}
input {
    background-color:#ffff19;
}
#subject {
    background-color:#ffff19;
    border:none;
    width:73px;
}
.time{
    height:25px;
    width:300px;
    float:right;
}

.note hr{
    width;350px;
}

JS:

$('#wrp').click(function newNote() {
    var newDiv = document.createElement("div");
    newDiv.className = 'note'
    var currentDiv = document.getElementById("wrp");
    $(newDiv).insertBefore('.note');
}

Answer 1

或者您可以简单地 clone() 要复制的 .note 元素。

$('#wrp').click(function() {
    var note = $('.note').first(); // assuming the first .note to clone
    note.clone().insertBefore(note);
});