1 事件绑定
1.1 点击触发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="点击触发" onclick="add()">
<ul id="city"></ul>
<script type="text/javascript">{
function add() {
var tag = document.createElement('li');
var parentTag = document.getElementById("city");
tag.innerText = "苏杭";
parentTag.appendChild(tag);
}
}
</script>
</body>
</html>
1.2 输入框触发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" placeholder="请输入内容" id="adduser">
<input type="button" value="添加" onclick="add()">
<ul id="city"></ul>
<script type="text/javascript">{
function add() {
// 1.找到输入标签
var txtTag = document.getElementById("adduser")
// 2.获取input输入框中的内容
var userString = txtTag.value;
if (userString.length > 0) {
// 3.创建li标签
var tag = document.createElement('li');
// 4.获取li的父级标签
var parentTag = document.getElementById("city");
// 5.将输入框的内容赋值到li标签内
tag.innerText = userString;
// 6.将li标签塞到ul标签
parentTag.appendChild(tag);
// 7.将input输入框重置
txtTag.value = ""
}
else {
alert("必填项")
}
}
}
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
