Question

我使用document.createElement创建一个包含如下类的div：

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

但是我不知道如何让div拥有.note的html元素，并且每当我触发块时，它会加倍但是有多少音符！因此，如果有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);
});

Answer 2

您可以使用.html()函数来检索或替换div的内部HTML（所有元素）：

var noteHtml = $(".note").html(); //Retrieve all HTML / elements inside the .note div
var newDiv = document.createElement("div");
newDiv.className = 'note';
newDiv.html(noteHtml); //Place all the HTML / elements in the new div

jQuery用元素创建Div

2 个答案: