<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>已点菜品</h1>
<ul>
<li>
<span>水煮鱼</span>
<button class="delete-btn" οnclick="deleteNode(this);">删除</button>
</li>
</ul>
<div>
<input type="text" width="200px"/>
<button id="add-btn">添加菜品</button>
</div>
</body>
<script>
document.getElementById('add-btn').onclick = function(){
var $input = document.getElementsByTagName('input')[0];
if($input.value.length === 0){
alert("请输入想添加的菜品");
return;
}
addFood($input.value);
$input.value = '';
}
function addFood(value){
// 创建对应<li>,<span>节点
var liNode = document.createElement('li');
var spanNode = document.createElement('span');
// 为<span>节点添加文本
appendTextNode(spanNode,value);
// 创建<button>节点
var buttonNode = document.createElement('button');
// 为<button>节点添加文本内容、class属性及onclick属性
appendTextNode(buttonNode,'删除');
appendClassAttribute(buttonNode,'delete-btn');
appendClickAttribute(buttonNode);
// 将<span>和<button>节点添加到<li>节点
liNode.appendChild(spanNode);
liNode.appendChild(buttonNode);
// 将<li>节点添加到列表<ul>中
document.getElementsByTagName('ul')[0].appendChild(liNode);
}
function appendTextNode(node,value){
var textNode = document.createTextNode(value);
node.appendChild(textNode);
}
function appendClassAttribute(node,value){
var attributeNode = document.createAttribute('class');
attributeNode.value = value;
node.setAttributeNode(attributeNode);
}
function appendClickAttribute(node){
var attributeNode = document.createAttribute('onclick');
attributeNode.value = 'deleteNode(this)';
node.setAttributeNode(attributeNode);
}
function deleteNode(dom){
const liNode = dom.parentNode;
document.getElementsByTagName('ul')[0].removeChild(liNode);
}
</script>
</html>
1187
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
