效果展示
初始畫面
提交內(nèi)容后畫面（按鍵按下）
代碼區(qū)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表白墻</title>
</head>
<style>* {margin: 0px;padding: 0px;}.total {width: 400px;margin: 0px auto; }h1 {text-align: center;padding-bottom: 30px;}p {text-align: center;color: gray;}.div1 {display: flex;justify-content: center; align-items: center; padding-top: 5px;}span {width: 80px;height: 30px;}#edit {width: 200px;height: 30px;}.submit {width: 280px;height: 30px;background-color: rgba(248, 236, 7, 0.942);border: none;border-radius: 5px;}.submit:active{background-color: grey;}
</style>
<body><div class="total"><h1>表白墻</h1><p>輸入后請(qǐng)點(diǎn)擊提交，會(huì)將信息顯示在表格中</p><div class="div1"><span>誰：</span><input id="edit" class="who" type="text"></div><div class="div1"><span>對(duì)誰：</span><input id="edit" class="ofwho" type="text"></div><div class="div1"><span>說什么</span><input id="edit" class="what" type="text"></div><div class="div1"><input class="submit" type="button" value="提交" onclick="submit()"></div></div>
</body>
<script>function submit(){let containDiv = document.querySelectorAll('#edit')console.dir(containDiv)let from = containDiv[0].valuelet to = containDiv[1].valuelet message = containDiv[2].valueconsole.log(from+'對(duì)'+to+'說'+message)let nodeDiv = document.createElement('div')nodeDiv.className = 'div1'nodeDiv.innerHTML = from+'對(duì)'+to+'說'+messageconsole.log(nodeDiv)let nodeparent = document.querySelector('.total')nodeparent.appendChild(nodeDiv)}
</script>
</html>
