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