原生js实现提交评论，显示评论的效果的方法（代码示例）

来源：微智科技网

本篇文章给大家带来的内容是介绍原生js实现提交评论，显示评论的效果的方法（代码示例）。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <style>

 #box{
 width: 900px;
 margin: 0 auto;
 }
 #text{
 width: 900px;
 height: 400px;
 margin: 0 auto;
 background-color: #fbe1c8;
 margin-top: 60px;
 outline: none;
 border-radius: 8px;
 border:2px solid #e59a56;
 overflow: hidden;
 }
 #tup{
 float: right;
 display: block;
 margin-top: 10px;
 margin-left: 20px;
 width: 60px;
 height: 36px;
 background-color: #e69b57;
 font-size: 18px;
 line-height: 36px;
 border-radius: 6px;
 text-align: center;
 color: #ffffff;
 cursor:pointer;
 }
 #wad{
 margin-top: 60px;
 width: 880px;
 }
 #wad p{
 font-size: 18px;
 line-height: 24px;
 border-bottom: 1px dashed #e69b57;
 word-wrap: break-word;
 }

 </style>
</head>
<body>
 <div id="box">
 <div id="text" contenteditable="true"></div>
 <span id="tup">提交</span>
 <div id="wad"></div>
 </div>
 <script>
 let Text = document.getElementById('text'),
 Tup = document.getElementById("tup"),
 Pl = document.getElementById("wad");
 Tup.onclick = function(){
 Li = "<p>" + Text.innerHTML + "</p>";
 Text.innerHTML = "";
 Pl.innerHTML += Li ;
 }

 </script>
</body>
</html>

效果图：

显示全文

全部频道

原生js实现提交评论，显示评论的效果的方法（代码示例）