wrapAll() 不适用于第一个插入的数据

Question

我正在尝试将<p>和<span>包装成一个div。插入第一个数据后，wrapAll()不起作用。但是当我输入第二个数据时，wrapAll()是针对第一个数据而不是第二个数据工作的。我想添加包装以及<p>和<span>标签。

var messages = document.getElementById("messages");
var textbox = document.getElementById("textbox");
var button = document.getElementById("button");
// with enter press button
textbox.addEventListener("keydown", function (e) {
    if (e.keyCode === 13) {
       if(e.shiftKey) {
        }else {
            chatbox(e);
        }
    }
});
function chatbox(e) {
   var newMessage = document.createElement("p");
   newMessage.setAttribute('class', 'list');
   $( ".list, .c-hour" ).wrapAll( "<div class='new'></div>" );
   
   var hour = document.createElement("span");
   hour.setAttribute('class', 'c-hour');
   var d = new Date();
   var n = d.getHours();
   var m = d.getMinutes();
   hour.innerHTML = n + ":" + m;
   messages.appendChild(hour);
   
   newMessage.innerHTML = textbox.value;
   messages.appendChild(newMessage);
   textbox.value = "";
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
   <div class="chat-area">
      <ul id ="messages"></ul>
   </div>
   <textarea id="textbox" type="text" placeholder="shout"></textarea>
</div>

Answer 1

在

将创建的元素添加到文档中后，必须调用$( ".list, .c-hour" ).wrapAll( "<div class='new'></div>" );。

所以它应该放在messages.appendChild(newMessage);喜欢之后

function chatbox(e) {
  var newMessage = document.createElement("p");
  newMessage.setAttribute('class', 'list');
  var hour = document.createElement("span");
  hour.setAttribute('class', 'c-hour');
  var d = new Date();
  var n = d.getHours();
  var m = d.getMinutes();
  hour.innerHTML = n + ":" + m;
  messages.appendChild(hour);
  newMessage.innerHTML = textbox.value;
  messages.appendChild(newMessage);
  $(newMessage).wrapAll( "<div class='new'></div>" );
  $(hour).wrapAll( "<div class='new'></div>" );
  textbox.value = "";
}