新創建一個元素節點，并把該節點添加為文檔中指定節點的子節點
1，新創建一個元素節點，返回值為指向元素節點的引用
var liNode =document.creatElement("li");var cityNode=document.getElementById("city");新添加newChild子節點，該子節點將作為elementNode
cityNode.appendChild(liNode);
2,創建一個文本節點 creatTextNode
var xmText=document.creatTextNode("廈門");
//需求: 點擊 submit 按鈕時, 檢查是否選擇 type, 若沒有選擇給出提示: "請選擇類型"; // 檢查文本框中是否有輸入(可以去除前后空格), 若沒有輸入,則給出提示: "請輸入內容";//若檢查都通過, 則在相應的 ul 節點中添加對應的 li 節點 //需求2: 使包括新增的 li 都能響應 onclick 事件: 彈出 li 的文本值. window.onload = function(){function showContent(liNode){alert("^_^#" + liNode.firstChild.nodeValue);}var liNodes = document.getElementsByTagName("li");for(var i = 0; i < liNodes.length; i++){liNodes[i].onclick = function(){showContent(this);}}//1. 獲取 #submit 對應的按鈕 submitBtnvar submit = document.getElementById("submit");//2. 為 submitBtn 添加 onclick 響應函數submit.onclick = function(){//4. 檢查是否選擇 type, 若沒有選擇給出提示: "請選擇類型"http://4.1 選擇所有的 name="type" 的節點 typesvar types = document.getElementsByName("type");//4.2 遍歷 types, 檢查其是否有一個 type 的 checked 屬性存在, 就可說明//有一個 type 被選中了: 通過 if(元素節點.屬性名) 來判斷某一個元素節點是否有//該屬性.var typeVal = null;for(var i = 0; i < types.length; i++){if(types[i].checked){typeVal = types[i].value;break;}}//4.3 若沒有任何一個 type 被選中, 則彈出: "請選擇類型". 響應方法結束: //return falseif(typeVal == null){alert("請選擇類型");return false;}//5. 獲取 name="name" 的文本值: 通過 value 屬性: nameVal var nameEle = document.getElementsByName("name")[0];var nameVal = nameEle.value;//6. 去除 nameVal 的前后空格. var reg = /^/s*|/s*$/g;nameVal = nameVal.replace(reg, "");//使 name 的文本框也去除前后空格. nameEle.value = nameVal;//6. 把 nameVal 和 "" 進行比較, 若是 "" 說明只出入了空格, 彈出 "請輸入內容"http://方法結束: return falseif(nameVal == ""){alert("請輸入內容");return false;}//7. 創建 li 節點var liNode = document.createElement("li");//8. 利用 nameVal 創建文本節點var content = document.createTextNode(nameVal);//9. 把 8 加為 7 的子節點liNode.appendChild(content);//11. 為新創建的 li 添加 onclick 響應函數liNode.onclick = function(){showContent(this);}//10. 把 7 加為選擇的 type 對應的 ul 的子節點document.getElementById(typeVal).appendChild(liNode);//3. 在 onclick 響應函數的結尾處添加 return false, 就可以取消提交按鈕的//默認行為. return false;}}</script></head><body><p>你喜歡哪個城市?</p><ul id="city"><li id="bj">北京</li><li>上海</li><li>東京</li><li>首爾</li></ul><br><br><p>你喜歡哪款單機游戲?</p><ul id="game"><li id="rl">紅警</li><li>實況</li><li>極品飛車</li><li>魔獸</li></ul><br><br><form action="dom-7.html" name="myform"><input type="radio" name="type" value="city">城市<input type="radio" name="type" value="game">游戲name: <input type="text" name="name"/><input type="submit" value="Submit" id="submit"/></form>以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持武林網！
新聞熱點
疑難解答
