快捷導(dǎo)航

JavaScript DOM實(shí)現(xiàn)簡(jiǎn)單留言板

更新時(shí)間：2022年01月07日 09:00:02 作者：我莫得感情_

這篇文章主要為大家詳細(xì)介紹了JavaScript DOM實(shí)現(xiàn)簡(jiǎn)單留言板，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了JavaScript DOM實(shí)現(xiàn)簡(jiǎn)單留言板的具體代碼，供大家參考，具體內(nèi)容如下

效果圖：

先準(zhǔn)備html代碼：

<body>
? ? <textarea name="" id=""></textarea>
? ? <button>發(fā)布</button>
? ? <ul>
?
? ? </ul>
</body>

css代碼如下：

<style>
? ? ? ? * {
? ? ? ? ? ? margin: 0;
? ? ? ? ? ? padding: 0;
? ? ? ? }
? ? ? ??
? ? ? ? body {
? ? ? ? ? ? padding: 100px;
? ? ? ? }
? ? ? ??
? ? ? ? textarea {
? ? ? ? ? ? width: 200px;
? ? ? ? ? ? height: 100px;
? ? ? ? ? ? border: 1px solid pink;
? ? ? ? ? ? outline: none;
? ? ? ? ? ? resize: none;
? ? ? ? }
? ? ? ??
? ? ? ? ul {
? ? ? ? ? ? margin-top: 50px;
? ? ? ? }
? ? ? ??
? ? ? ? li {
? ? ? ? ? ? width: 300px;
? ? ? ? ? ? padding: 5px;
? ? ? ? ? ? background-color: rgb(245, 209, 243);
? ? ? ? ? ? color: red;
? ? ? ? ? ? font-size: 14px;
? ? ? ? ? ? margin: 15px 0;
? ? ? ? }
</style>

接下來(lái)是最重要的部分，我們先使用document.querySelector()獲取我們要操作的對(duì)象：button，textarea和ul；

再給button注冊(cè)點(diǎn)擊事件，中間加入判斷是否有輸入內(nèi)容，如有輸入內(nèi)容，則繼續(xù)操作，使用document.createElement(‘li’)創(chuàng)建li標(biāo)簽，再使用li.innerHTML獲取textarea控件用戶輸入的值，最后使用ul.insertBefore（li,ul.children[0]）插入創(chuàng)建好的li標(biāo)簽。

注意：因?yàn)榱粞园屣@示最新的留言，所以插入在li的最前面。

完整代碼如下：

<body>
? ? <textarea name="" id=""></textarea>
? ? <button>發(fā)布</button>
? ? <ul>
?
? ? </ul>
? ? <script>
? ? ? ? //獲取元素
? ? ? ? var btn = document.querySelector('button');
? ? ? ? var text = document.querySelector('textarea');
? ? ? ? var ul = document.querySelector('ul');
? ? ? ? //注冊(cè)事件
? ? ? ? btn.onclick = function() {
? ? ? ? ? ? if (text.value == '') {
? ? ? ? ? ? ? ? alert('你沒(méi)輸內(nèi)容');
? ? ? ? ? ? ? ? return false;
? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? var li = document.createElement('li');
? ? ? ? ? ? ? ? li.innerHTML = text.value;
? ? ? ? ? ? ? ? ul.insertBefore(li, ul.children[0]);
? ? ? ? ? ? }
? ? ? ? ? ? text.value = '';
? ? ? ? }
? ? </script>
?
</body>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: