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

时间：2018-04-05 04:48:07

标签： javascript html css appendchild

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

为此，我为每条新邮件添加了一个模板。当点击发送时，我试图通过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>

2 个答案:

答案 0 :(得分：1)

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

为防止这种情况发生，您需要更新onsubmit以传递event：

<form onsubmit="submitfun(event)">

并使用以下命令阻止默认行为：

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

这可以在以下内容中看到：

＆＃13;
＆＃13; 
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);
  }
}
＆＃13; 
#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%;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

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

尝试以下内容

＆＃13;
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题