动态添加的模板 div 不会持续存在并会在几秒钟内消失

Question

我是网络开发的新手，正在尝试将聊天界面作为一个迷你项目。所以，我正在测试是否可以在聊天记录中显示消息window。我以这样的方式编写代码，当我点击发送按钮（即使没有在文本框中输入任何内容）时，聊天记录必须为自己添加一条消息。

为此，我为每条新消息都设置了一个模板。当单击发送时，我试图通过 appendChild() 添加它。但是，当我单击发送按钮时，新消息会停留几分之一秒然后消失。你可以说，它闪烁。但我希望它完全可见。是我的做法不对还是有更好更简单的方法呢

我听说使用 innerHTML 会产生一些副作用，但我不知道 jQuery。所以，请从这个角度回答。

关于我的编码风格的其他建议也非常感谢。

<html>

<head>
  <style>
    #message {
      -webkit-border-radius: 15px;
      float: bottom;
      position: fixed;
      max-width: 400px;
      background: blue;
      word-wrap: break-word;
    }
    
    #sender {
      text-align: left;
      padding-left: 20px;
      padding-top: 5px;
      font-family: Arial;
      font-weight: bold;
      color: white;
    }
    
    #text {
      text-align: left;
      font-size: 18px;
      padding-left: 20px;
      padding-right: 20px;
    }
    
    #time {
      text-align: right;
      padding-right: 15px;
      font-size: 15px;
    }
    
    #nav {
      height: 10%;
      margin: 0px;
      padding: 0px;
      background: blue;
    }
    
    body {
      margin: 0px;
      padding: 0px;
      overflow: hidden;
    }
    
    #nextwhole {
      -webkit-orient: horizontal;
    }
    
    #navbar {
      width: 25%;
      background: green;
      height: 90%;
      float: left;
    }
    
    #msgchat {
      width: 75%;
      height: 100%;
      position: relative;
      float: right;
    }
    
    #messages {
      background: orange;
      height: 80%;
      width: 100%;
    }
    
    #chatint {
      background: red;
      height: 10%;
      width: 100%;
    }
    
    #chattext {
      width: 90%;
      height: 90%;
    }
    
    #send {
      width: 9.5%;
      height: 90%;
    }
  </style>


  <script>
    function submitfun() {

      if ('content' in document.createElement('template')) {


        var t = document.querySelector('#msgtemplate');
        var td = t.content.querySelectorAll("p");
        td[0].textContent = "user";
        td[1].textContent = "this is message";
        td[2].textContent = "time";


        var tb = document.querySelector("#messages");
        var clone = document.importNode(t.content, true);
        tb.appendChild(clone);



      }

    }
  </script>



</head>

<body>
  <div id="nav">
  </div>

  <div id="nextwhole">
    <div id="navbar"></div>
    <div id="msgchat">
      <div id="messages">
      </div>
      <div id="chatint">
        <form onsubmit="submitfun()">
          <input type="text" id="chattext">
          <input type="submit" id="send" value="SEND">
        </form>
      </div>
    </div>


  </div>
  <template id="msgtemplate">
<div id="message">
<p id="sender"></p>
<p id="text"></p>
<p id="time"></p>
</div>
</template>


</body>

</html>

Answer 1

因为您正在使用 <form>，它会默认尝试提交表单。

为防止出现这种情况，您需要更新 onsubmit 以同时传递 event:

<form onsubmit="submitfun(event)">

并防止默认行为：

function submitfun(e) {
  e.preventDefault();
  ...

这可以在下面看到：

function submitfun(e) {
  e.preventDefault();
  if ('content' in document.createElement('template')) {
    var t = document.querySelector('#msgtemplate');
    var td = t.content.querySelectorAll("p");
    td[0].textContent = "user";
    td[1].textContent = "this is message";
    td[2].textContent = "time";
    var tb = document.querySelector("#messages");
    var clone = document.importNode(t.content, true);
    tb.appendChild(clone);
  }
}

#message {
  -webkit-border-radius: 15px;
  float: bottom;
  position: fixed;
  max-width: 400px;
  background: blue;
  word-wrap: break-word;
}

#sender {
  text-align: left;
  padding-left: 20px;
  padding-top: 5px;
  font-family: Arial;
  font-weight: bold;
  color: white;
}

#text {
  text-align: left;
  font-size: 18px;
  padding-left: 20px;
  padding-right: 20px;
}

#time {
  text-align: right;
  padding-right: 15px;
  font-size: 15px;
}

#nav {
  height: 10%;
  margin: 0px;
  padding: 0px;
  background: blue;
}

body {
  margin: 0px;
  padding: 0px;
  overflow: hidden;
}

#nextwhole {
  -webkit-orient: horizontal;
}

#navbar {
  width: 25%;
  background: green;
  height: 90%;
  float: left;
}

#msgchat {
  width: 75%;
  height: 100%;
  position: relative;
  float: right;
}

#messages {
  background: orange;
  height: 80%;
  width: 100%;
}

#chatint {
  background: red;
  height: 10%;
  width: 100%;
}

#chattext {
  width: 90%;
  height: 90%;
}

#send {
  width: 9.5%;
  height: 90%;
}

<body>
  <div id="nav"></div>
  <div id="nextwhole">
    <div id="navbar"></div>
    <div id="msgchat">
      <div id="messages">
      </div>
      <div id="chatint">
        <form onsubmit="submitfun(event)">
          <input type="text" id="chattext">
          <input type="submit" id="send" value="SEND">
        </form>
      </div>
    </div>
  </div>
  <template id="msgtemplate">
    <div id="message">
      <p id="sender"></p>
      <p id="text"></p>
      <p id="time"></p>
    </div>
  </template>
</body>

Answer 2

理想情况下，您不应该提交表格。

试试下面的方法

<html>

<head>
  <style>
    #message {
      -webkit-border-radius: 15px;
      float: bottom;
      position: fixed;
      max-width: 400px;
      background: blue;
      word-wrap: break-word;
    }
    
    #sender {
      text-align: left;
      padding-left: 20px;
      padding-top: 5px;
      font-family: Arial;
      font-weight: bold;
      color: white;
    }
    
    #text {
      text-align: left;
      font-size: 18px;
      padding-left: 20px;
      padding-right: 20px;
    }
    
    #time {
      text-align: right;
      padding-right: 15px;
      font-size: 15px;
    }
    
    #nav {
      height: 10%;
      margin: 0px;
      padding: 0px;
      background: blue;
    }
    
    body {
      margin: 0px;
      padding: 0px;
      overflow: hidden;
    }
    
    #nextwhole {
      -webkit-orient: horizontal;
    }
    
    #navbar {
      width: 25%;
      background: green;
      height: 90%;
      float: left;
    }
    
    #msgchat {
      width: 75%;
      height: 100%;
      position: relative;
      float: right;
    }
    
    #messages {
      background: orange;
      height: 80%;
      width: 100%;
    }
    
    #chatint {
      background: red;
      height: 10%;
      width: 100%;
    }
    
    #chattext {
      width: 90%;
      height: 90%;
    }
    
    #send {
      width: 9.5%;
      height: 90%;
    }
  </style>


  <script>
    function submitfun() {

      if ('content' in document.createElement('template')) {


        var t = document.querySelector('#msgtemplate');
        var td = t.content.querySelectorAll("p");
        td[0].textContent = "user";
        td[1].textContent = "this is message";
        td[2].textContent = "time";


        var tb = document.querySelector("#messages");
        var clone = document.importNode(t.content, true);
        tb.appendChild(clone);



      }

    }
  </script>



</head>

<body>
  <div id="nav">
  </div>

  <div id="nextwhole">
    <div id="navbar"></div>
    <div id="msgchat">
      <div id="messages">
      </div>
      <div id="chatint">
        <form onsubmit="javascript:return false;">
          <input type="text" id="chattext">
          <input type="submit" id="send" value="SEND" onclick="submitfun();">
        </form>
      </div>
    </div>


  </div>
  <template id="msgtemplate">
<div id="message">
<p id="sender"></p>
<p id="text"></p>
<p id="time"></p>
</div>
</template>


</body>

</html>

动态添加的模板 div 不会持续存在并会在几秒钟内消失

The dynamically added template div doesn't persist and disappears within seconds

html

javascript

css

appendchild