浅述节点的创建及常见功能的实现

新创建一个元素节点，并把该节点添加为文档中指定节点的子节点

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>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！

# 节点 # 创建 # jQuery与JavaScript节点创建方法的对比 # jstree创建无限分级树的方法【基于ajax动态创建子节点】 # jQuery动态创建元素以及追加节点的实现方法 # jQuery简单创建节点的方法 # JavaScript中对DOM节点的访问、创建、修改、删除 # JQuery创建DOM节点的方法 # 删除javascript所创建子节点的方法 # js创建元素（节点）示例 # xml创建节点(根节点、子节点) # js和jquery对dom节点的操作(创建/追加) # jquery创建一个新的节点对象(自定义结构/内容)的好方法 # 创建二叉树二叉树如何删除节点操作教程 # 初学js 新节点的创建删除的步骤 # 请选择 # 请输入 # 弹出 # 创建一个 # 你喜欢 # 加为 # 有一个 # 东京 # 都能 # 遍历 # 厦门 # 就可 # 任何一个 # 则在 # 上海 # 北京 # 值为 # 框中 # 单机游戏 # 就可以

返回目录在线咨询

上一篇：如何诊断并终止卡死的 multiprocessing 子进程
下一篇：php怎么操作Redis_Redis扩展连接与基本命令使用方法【方法】

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

浅述节点的创建及常见功能的实现

您的项目需求