摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>實(shí)戰(zhàn)熱身</title>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>實(shí)戰(zhàn)熱身</title>
<style>
body{
margin: 0;
padding: 0;
background: #00FF00;
}
ul li {
list-style: none;
width: 30px;
height: 30px;
border-radius: 50%;
}
img{
background-color: red;
}
.wap_box{
width: 600px;
height: 500px;
margin: 0 auto;
background: #2F4056;
position: relative;
}
h3{
text-align: center;
color: #fff;
}
.input_box{
width: 260px;
position: absolute;
left: 50%;
margin-left: -130px;
bottom: 0;
text-align: center;
}
</style>
</head>
<body>
<div class="wap_box">
<h3>正在跟王小花聊天...</h3>
<div class="input_box">
<input type="text" name="info">
<button>發(fā)送</button>
</div>
<ul>
</ul>
</div>
<script>
//獲取元素
let input = document.getElementsByName('info')[0];
let button = document.getElementsByTagName('button')[0];
let ul = document.getElementsByTagName('ul')[0];
let wap_box = document.getElementsByClassName('wap_box')[0];
//鼠標(biāo)點(diǎn)擊事件
button.onclick = function () {
// 創(chuàng)建dom元素 createElement("li");
let li = document.createElement('li');
li.innerHTML = input.value; //li插入input的value值
// 添加dom
ul.appendChild(li); //將用戶框顯示到列表中
// input.value = ''; //將文本框清空
};
</script>
</body>
</html>本節(jié)知識(shí)點(diǎn):
獲取dom：
dom通過name值獲?。?document.getElementsByName（）
dom通過標(biāo)簽名值獲?。篸ocument.getElementsByTagName（）
dom通過class獲?。簅cument.getElementsByClassName（）
點(diǎn)擊事件：onclick
創(chuàng)建li標(biāo)簽 createElement("li");
創(chuàng)建一個(gè)js 變量存放 li標(biāo)簽
li插入input的value值
更新li標(biāo)簽 .appendChild(li);
批改老師：天蓬老師批改時(shí)間：2019-01-10 08:52:48
老師總結(jié)：其實(shí)創(chuàng)建新元素并添加到頁(yè)面中是很有講究的, 有空你研究一下文檔碎片