使用javascript时无法调整设计

我只是想表明你可以发送你的信息，而不是在我的前端硬编码所有的信息。我使用了一个家伙已经开发的代码这里是链接

我在输入字段中添加了id=“msg”，并在类为chat panel的位置添加了id=“chatpanel”

附上图片。现在，问题是消息被发送（仅在显示器中）b，但气泡被放置在输入区域下方

这是我的附加JS代码

function send(){
    
var msg = document.getElementById("msg").value;
var div1=document.createElement("div");
div1.classList.add("row","no-gutters");

  
  var div2=document.createElement("div");

  div2.classList.add("col-md-3","offset-md-9");
  

    
  
  var div3=document.createElement("div");
  div3.classList.add("chat-bubble","chat-bubble--right");
  

var text=document.createTextNode(msg);
  
  div3.appendChild(text);
  div2.appendChild(div3);
  div1.appendChild(div2);
  
  var main=document.getElementById("chatpanel");
  
  main.appendChild(div1);


}

---

这是因为消息输入框位于

#chatpanel

div中。当您将新消息附加到

#chatpannel

div中时，它将添加到该div中的最后一个元素之后。您需要获取

#msg

输入（它包含div）并将其移出

#chatpannel

div

您的代码大致如下所示：

<div id="chatpannel">
    <div class="msg-box-container">
        <input type="text" id="msg" />
        <button type="button">Submit</button>
    </div>
</div>

<div id="chatpannel">
</div>
<div class="msg-box-container">
    <input type="text" id="msg" />
    <button type="button">Submit</button>
</div>

提交

你需要这样做：

<div id="chatpannel">
    <div class="msg-box-container">
        <input type="text" id="msg" />
        <button type="button">Submit</button>
    </div>
</div>

<div id="chatpannel">
</div>
<div class="msg-box-container">
    <input type="text" id="msg" />
    <button type="button">Submit</button>
</div>

提交

看起来像是

#msg

也是

#chatpanel

->的孩子是的，我工作过。非常感谢您帮助我。您可能想添加此作为答案，并接受它以将此问题标记为“已解决”