摘要:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>聊天信息生成</title> </head> <body> <input type="text"><button>發(fā)送</button> <ol></ol> <script> let input = document.getElementsByTagName('input')[0]; let button = document.getElementsByTagName('button')[0]; let ol =document.getElementsByTagName('ol')[0]; button.onclick=function(){ let li = document.createElement('li'); li.innerHTML= input.value; ol.appendChild(li); input.value=""; } </script> </body> </html>
通過獲取到元素,然后創(chuàng)建li節(jié)點來接收input中輸入的值,接著將li節(jié)點插入到ol節(jié)點中,然后將input節(jié)點中的值清空,這樣就能達(dá)到在輸出框輸入文字,點提交后,讓文字在下面顯示的效果
批改老師:天蓬老師批改時間:2019-03-30 13:42:49
老師總結(jié):這是一個簡單的dom操作, 涉及一些基本的元素獲取技巧 , 多做幾次, 掌握它