????:<!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>
通過(guò)獲取到元素,然后創(chuàng)建li節(jié)點(diǎn)來(lái)接收input中輸入的值,接著將li節(jié)點(diǎn)插入到ol節(jié)點(diǎn)中,然后將input節(jié)點(diǎn)中的值清空,這樣就能達(dá)到在輸出框輸入文字,點(diǎn)提交后,讓文字在下面顯示的效果
?? ???:天蓬老師?? ??:2019-03-30 13:42:49
???? ??:這是一個(gè)簡(jiǎn)單的dom操作, 涉及一些基本的元素獲取技巧 , 多做幾次, 掌握它