本文由 DTcms素材网 – DT素材网 发布，转载请注明出处，如有问题请联系我们！原生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>
效果图：
