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

将创建的元素添加到文档后，您必须调用// hoisted if( true){ x = 1; console.log( x, typeof x ); var x; } // doesn't do what you thought it would, the assignment doesn't move, just the declaration. if( true){ console.log( y, typeof y ); var y = 1; }。

因此，应将其放在$( ".list, .c-hour" ).wrapAll( "<div class='new'></div>" );之后，如

messages.appendChild(newMessage);

wrapAll（）不适用于第一个插入的数据

1 个答案: