Javascript之节点操作

更新时间：2022-10-01 18:11:45

现在总结下原生Javascript中节点的操作，框架诚可贵，原生更久远啊。

在Javascript中新增一个dom元素的对象是 document.createElement("type");

创建了一个元素节点以后要把这个节点增加到html的dom中那么就要用到appendChild() 或 insertBefore()方法

下面举个例子

<script type="text/javascript">
var oTest = document.getElementById("test");
var newNode = document.createElement("p");
newNode.innerHTML = "This is a test";
//测试从这里开始
//appendChild方法：
oTest.appendChild(newNode);
//insertBefore方法：
oTest.insertBefore(newNode,null);
</script>

那么我下面给出一个全面的例子，基本上不用唠叨什么，我们在给指定的位置（id）的节点中增加一个完整的form表单

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Javascript之节点操作</title>
<style>
#container {margin-left: auto; margin-right: auto; width:960px;}
</style>
<script type="text/javascript">
function addNewForm(node_id){ //通过动态新建一个完整的表单来熟悉Javascript的节点操作
e = document.getElementById(node_id);
e_form = document.createElement("form");
//两种方法对新建的节点的属性进行赋值如下两种效果等同
//第一种：e_form.setAttribute("method","post");
//第二种: e_form.method = "post";
e_form.method = "post";
e_form.action = "http://localhost/test/index.php";
e_form.name = "apply_form";
e_form.enctype = "multipart/form-data";
//等等属性
//建立表单内部的元素节点
e_intput_text = document.createElement("input"); // text 节点
e_intput_text.type = "text"; //<input type="text" name="apply_input_text" value="defalut" />
e_intput_text.name = "apply_input_text";
e_intput_text.id = "apply_input_text";
e_intput_text.value = "dafault";
e_input_select = document.createElement("select"); //select 元素
e_input_select.options[0] = new Option("OptionOneName", "OptionOneValue");
e_input_select.options[1] = new Option("OptionTwoName", "OptionTwoValue");
e_input_select.options[2] = new Option("OptionThreeName", "OptionThreeValue");
e_input_select.options[3] = new Option("OptionFourName", "OptionFourValue");
e_intput_password = document.createElement("input"); // password 节点
e_intput_password.type = "password"; //<input type="text" name="apply_input_text" value="defalut" />
e_intput_password.name = "apply_input_password";
e_intput_password.id = "apply_input_password";
e_intput_password.value = "can_you_guess";
e_intput_button = document.createElement("input"); // text 节点
e_intput_button.type = "button"; //<input type="text" name="apply_input_text" value="defalut" />
e_intput_button.name = "apply_input_button";
e_intput_button.id = "apply_input_button";
e_intput_button.value = "按钮";
e_intput_button.onclick = "javascript:alert('This is a test!');"; //新增一个事件属性
e_intput_submit = document.createElement("input"); // text 节点
e_intput_submit.type = "submit"; //<input type="text" name="apply_input_text" value="defalut" />
e_intput_submit.name = "apply_input_submit";
e_intput_submit.value = "提交";
//把表单内部的元素节点增加到表单节点内部appendChild() 或 insertBefore() 都可以
//区别在于 appendChild 把新加的节点放到节点内部的最后而
//insertBefore 可以提供参数把节点加入到任意的指定位置
e_form.appendChild(e_intput_text); //文本输入框
e_form.appendChild(e_input_select); //下拉选择框
e_form.appendChild(e_intput_password); // 密码输入框
e_form.appendChild(e_intput_button); //button 按钮
e_form.appendChild(e_intput_submit); //submit 提交按钮
//下面来用示例说明下 insertBefore(newNode,null);
//如果第二个参数为null 那么跟appendChild 的效果是一样的哦如果想要传入到特定的位置那么需要传入一个节点元素
//这个就不再这里举例了在文字介绍里面介绍下
e.appendChild(e_form);//把Form 节点加载到页面传入的节点内部
}
</script>
</head>
<body>
<div id="container">
<div id="testarea">
<div id="excutearea"></div>
<div onclick="addNewForm('addArea')">在指定元素的内部增加一个完整的表单</div>
</div>
<br/>
<div id="addArea">
<div>指定区域</div>
</div>
</div>
</body>
</html>

基本上的用法在里面都有，下面来从网上摘抄了例子解释下insertBefore()

<script type="text/javascript">
//效果：这个例子将在x1节点前面插入一个新的节点
var oTest = document.getElementById("test");
var refChild = document.getElementById("x1");
var newNode = document.createElement("p");
newNode.innerHTML = "This is a test";
oTest.insertBefore(newNode,refChild);
//或者
//效果：这个例子将在x1节点的下一个节点前面插入一个新的节点
var oTest = document.getElementById("test");
var refChild = document.getElementById("x1");
var newNode = document.createElement("p");
newNode.innerHTML = "This is a test";
oTest.insertBefore(newNode,refChild.nextSibling);
//还可为：
//这个例子将在第一子节点前面插入一个新的节点，也可以通过改变childNodes[0,1,...]来在其它位置插入新的节点
var oTest = document.getElementById("test");
var newNode = document.createElement("p");
newNode.innerHTML = "This is a test";
oTest.insertBefore(newNode,oTest.childNodes[0]);
</script>

基本上的操作就这些

参考:http://www.cnblogs.com/penny/archive/2008/09/01/1281293.html

本文转自kefirking 51CTO博客，原文链接：http://blog.51cto.com/phpzf/782159，如需转载请自行联系原作者

上一篇 : ：Linux 5.4 RHCE NIS学习笔记（上）下一篇 : 路由软件Quagga

Javascript之节点操作

相关阅读

推荐文章