新創建一個元素節點，並把該節點添加為文檔中指定節點的子節點
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 對應的按鈕 submitBtn
var submit = document.getElementById("submit");
//2. 為 submitBtn 添加 onclick 響應函數
submit.onclick = function(){
//4. 檢查是否選擇 type, 若沒有選擇給出提示: "請選擇類型"
//4.1 選擇所有的 name="type" 的節點 types
var 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 false
if(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 和 "" 進行比較, 若是 "" 說明只出入了空格, 彈出 "請輸入內容"
//方法結束: return false
if(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>
以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持！