<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
//新创建一个元素节点，并把该节点添加为文档中指定节点的子节点
window.onload = function() {
//创建新的元素节点
var liNode = document.createElement("li");
var cityNode = document.getElementById("city");
//创建文本节点
var xmText = document.createTextNode("厦门");
//将文本节点添加到元素节点
liNode.appendChild(xmText);
cityNode.appendChild(liNode);
}
</script>
</head>
<body>
<p>你喜欢哪个城市？</p>
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li>上海</li>
<li>武汉</li>
<li>深圳</li>
</ul>
<ul id="book">
<li id="xyj" name="xyj">西游记</li>
<li>三国演义</li>
<li>水浒传</li>
</ul>
</body>
</html>
Javascript实现
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function() {
//JS函数参数不需要类型
function showContent(liNode){
alert("^_^" + liNode.firstChild.nodeValue);
}
/*
var bjNode = document.getElementById("bj");
if(bjNode.id){
alert("存在id属性");//存在
}else{
alert("不存在id属性");
}
var shNode = document.getElementsByTagName("li")[1];
if(shNode.id){
alert("存在id属性");
}else{
alert("不存在id属性");//不存在
}*/
var liNodes = document.getElementsByTagName("li");
for(var i = 0; i < liNodes.length; i++){
liNodes[i].onclick = function(){
showContent(this);
}
}
var submit = document.getElementById("submit");
submit.onclick = function(){
//alert(1);
var types = document.getElementsByName("type");
//alert(types.length);
var typeValue = null;
for(var i = 0; i < types.length; i++){
if(types[i].checked){
typeValue = types[i].value;
break;
}
}
if(!typeValue){
alert("请选择类型");
return false;
}
var nameEle = document.getElementsByName("myName")[0];
var nameVal = document.getElementsByName("myName")[0].value;
var reg = /^\s*|\s*$/g;//去除前后空格
nameVal = nameVal.replace(reg, "");
if(nameVal == ""){
alert("请输入内容");
return false;
}
nameEle.value = nameVal;
//创建元素节点
var liNode = document.createElement("li");
//创建文本节点
var content = document.createTextNode(nameVal);
//将文本节点添加到元素节点
liNode.appendChild(content);
document.getElementById(typeValue).appendChild(liNode);
//为新添加的li添加onclick响应事件
liNode.onclick = function(){
showContent(liNode);
}
//取消form提交的行为
return false;
}
}
</script>
</head>
<body>
<p>你喜欢哪个城市？</p>
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li>上海</li>
<li>武汉</li>
<li>深圳</li>
</ul>
<p>你喜欢哪本书？</p>
<ul id="book">
<li id="xyj" name="xyj">西游记</li>
<li>三国演义</li>
<li>水浒传</li>
</ul>
<br />
<form action="#" name="myForm">
<input type="radio" name="type" value="city"/>城市
<input type="radio" name="type" value="book"/>BOOK
<input type="text" name="myName"/>
<input type="submit" value="submit" id="submit"/>
</form>
</body>
</html>JQuery实现
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function() {
function showContent(li){
alert($(li).text());
}
//为所有li节点添加点击事件
$("li").click(function(){
showContent(this);
});
//为submit按钮添加响应事件
$(":submit").click(function(){
var $type = $(":radio[name='type']:checked");
if($type.length == 0){
alert("请选择类型");
return false;
}
var type = $type.val();//读取value值
//alert(type);
var $myName = $(":text[name='myName']");
//去除前后空格
var myName = $.trim($myName.val());
$myName.val(myName);//将文本框的值设置为去除前后空格之后的 值
//alert(myName);
if(myName.length == 0){
alert("请请输入内容");
return false;
}
//添加新节点
$("<li>" + myName + "</li>").appendTo("#" + type)
.click(function(){//方法连缀，添加点击事件
showContent(this);
});
//取消默认提交行为
return false;
});
})
</script>
</head>
<body>
<p>你喜欢哪个城市？</p>
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li>上海</li>
<li>武汉</li>
<li>深圳</li>
</ul>
<p>你喜欢哪本书？</p>
<ul id="book">
<li id="xyj" name="xyj">西游记</li>
<li>三国演义</li>
<li>水浒传</li>
</ul>
<br />
<form action="#" name="myForm">
<input type="radio" name="type" value="city"/>城市
<input type="radio" name="type" value="book"/>BOOK
<input type="text" name="myName"/>
<input type="submit" value="submit" id="submit"/>
</form>
</body>
</html>
