前端学习笔记之 创建节点 与 添加节点案例
生活随笔
收集整理的這篇文章主要介紹了
前端学习笔记之 创建节点 与 添加节点案例
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
發布留言案例實現
- 一、案例分析
- 二、實現過程
- 三、完整代碼
一、案例分析
二、實現過程
1. 基本骨架
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><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> </head> <body><textarea name="" id=""></textarea><button>發布</button><ul></ul><script></script> </body>2. 獲取元素
<script>// 1. 獲取元素var btn = document.querySelector('button');var text = document.querySelector('textarea');var ul = document.querySelector('ul');</script>3. 注冊事件
<script>// 1. 獲取元素var btn = document.querySelector('button');var text = document.querySelector('textarea');var ul = document.querySelector('ul');// 2.注冊事件btn.onclick = function () {// (1) 創建元素var li =document.createElement('li');// (2) 添加元素ul.appendChild(li);} </script>然而，僅僅如此，在沒有輸入內容的情況下，也會創建和添加元素。因此，需要加個判斷：
<script>// 1. 獲取元素var btn = document.querySelector('button');var text = document.querySelector('textarea');var ul = document.querySelector('ul');// 2. 注冊事件btn.onclick = function() {if (text.value == '') {alert('您還沒有輸入內容');return false;} else {// console.log(text.value);// (1) 創建元素var li = document.createElement('li');// (2) 添加元素ul.appendChild(li);}} </script>如要實現發布的最新留言永遠在最前面，則修改 ul.appendChild(li) 為 ul.insertBefore(li,ul.children[0]);
三、完整代碼
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><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> </head> <body><textarea name="" id=""></textarea><button>發布</button><ul></ul><script>// 1. 獲取元素var btn = document.querySelector('button');var text = document.querySelector('textarea');var ul = document.querySelector('ul');// 2. 注冊事件btn.onclick = function() {if (text.value == '') {alert('您沒有輸入內容');return false;} else {// console.log(text.value);// (1) 創建元素var li = document.createElement('li');li.innerHTML = text.value;// (2) 添加元素// ul.appendChild(li); // 最新發布的放到最后面ul.insertBefore(li,ul.children[0]); // 最新發布的發最前面}}</script> </body> </html> 創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的前端学习笔记之 创建节点 与 添加节点案例的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 开源短链接项目实战
- 下一篇： Vue自定义指令-实时时间转换指令 v-