JavaScript DOM编程学习笔记-创建并接入节点

来源：互联网发布：淘宝是猫京东是狗编辑：程序博客网时间：2024/05/16 14:15

<!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>

本文出自 “优赛工作室” 博客，请务必保留此出处http://shamrock.blog.51cto.com/2079212/1564560

0 0

JavaScript DOM编程 学习笔记-创建并接入节点

JavaScript DOM编程学习笔记-创建并接入节点