简易留言簿（js）
2018-08-22 本文已影响40人
GHope
留言.gif
<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 id="ip" type="text">
<input id="btn" type="button" value="留言">
<ul id="content"></ul>
<script>
var oinput = document.getElementById('ip')
var obtn = document.getElementById('btn')
var oul = document.getElementById('content')
// console.log(oul.children)
obtn.onclick = function () {
// 获取input框的值
content = oinput.value
// 创建一个li标签
var oli = document.createElement('li')
// 不仅添加内容，还添加删除功能
oli.innerHTML = content + ' <a href="javascript:;">删除</a>'
// 实现点击删除，删除li的功能
var oa = oli.getElementsByTagName('a')[0]
oa.onclick = function () {
oul.removeChild(oli)
}
// 添加的时候，放到最前面
// 获取ul的第一个子标签,通过判断ul的子标签是否为空
if (oul.children) {
// 非空
oul.insertBefore(oli, oul.children[0])
} else {
// 空
oul.appendChild(oli)
}
// 将input框清空
oinput.value = ''
// 让input框获得焦点
oinput.focus()
}
</script></body></html>
