<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>创建和插入节点</title>
<!--
创建节点
createElement() 创建一个新的节点,需要传入节点的标签名称,返回创建的元素对象
createTextNode() 创建一个文本节点,可以传入文本内容
innerHTML() 也能达到创建节点的效果,直接添加到指定位置
插入节点
write() 将任意的字符串插入到文档中
appendChild() 向元素中添加新的子节点,作为最后一个子节点
insertBefore() 向指定的已有节点之前插入新的节点
newItem:要插入的节点
exsitingItem:参考节点,需要参考父节点
-->
</head>
<body>
<button onclick="addPara()">添加段落</button>
<button onclick="addImg()">添加图片</button>
<button onclick="addTxt()">添加文本框</button>
<button onclick="addOptions()">添加选项</button>
<select name="music">
<option value="-1">你心中的一首歌</option>
<option value="0">浪子归心</option>
<option value="1">不可犹豫</option>
</select>
<hr />
<div id="container">
</div>
<ul>
<li id="red">红色</li>
<li>绿色</li>
</ul>
<hr />
</body>
<script type="text/javascript">
// 添加段落
function addPara(){
/*方式一*/
/*
// 创建p元素
var p=document.createElement("p");
console.log(p);
// 创建文本节点
var txt=document.createTextNode("这是一段文本");
console.log(txt);
// 将文本节点追加到元素节点当中
p.appendChild(txt);
console.log(p);
// 获取容器
var div=document.getElementById("container");
// 将p标签设置到div中
div.appendChild(p);
*/
/*方式二*/
// 创建p元素
/*
var p=document.createElement("p");
// 给p元素赋值
p.innerHTML="这是一段文本";
console.log(p);
// 获取容器
var div=document.getElementById("container");
// 将p标签设置到div中
div.appendChild(p);
*/
/*方式三*/
var p="<p>这是文本</p>";
// 获取容器
var div=document.getElementById("container");
div.innerHTML+=p;
}
// 添加图片
function addImg(){
// 获取容器
var div=document.getElementById("container");
/*方式一*/
/*
// 创建img元素
var img=document.createElement("img");
console.log(img);
// 设置属性
img.src="hello.jpg";
// 设置宽高属性
img.width=200;
img.height=200;
// 将图片设置到div容器中
div.appendChild(img);
*/
/*方式二*/
/*
// 创建img元素
var img=document.createElement("img");
img.setAttribute("src","hello.jpg");
// 将图片设置div容器中
div.appendChild(img);
*/
/*方式三*/
var img="<img src='hello.jpg' />";
div.innerHTML+=img; //加入+才会连续添加
}
// 添加文本框
function addTxt(){
// 得到容器元素
var div=document.getElementById("container");
/*方式一*/
/*
// 创建input元素
var inp=document.createElement("input");
// 指定input元素的类型
inp.type="text"; //文本框input类型
inp.value="今天天气不错!"; // 文本框的值
// 将input设置到容器中
div.appendChild(inp);
*/
/*方式二*/
/*
// 创建input元素
var inp=document.createElement("input");
// 设置属性
inp.setAttribute("type","text");
inp.setAttribute("value","您好");
// 将input设置到容器中
div.appendChild(inp);
*/
/*方式三*/
var inp="<input type='text' value='hello' />";
div.innerHTML+=inp;
}
// 添加下拉框
function addOptions(){
// 通过name属性值获取下拉框对象
var music=document.getElementsByName("music")[0];
/*方式一*/
/*
// 创建下拉选项
var opt=document.createElement("option");
// 设置文本和值
opt.value="2";
opt.text="晴天";
// 给下拉框添加下拉选项
music.appendChild(opt);
*/
/*方式二*/
/*
// 创建下拉选项
var opt=document.createElement("option");
opt.value="2";
opt.text="青花瓷";
// 将option添加到下拉列表中
console.log(music.options);
music.options.add(opt);
*/
/*方式三*/
var opt='<option value="2">千里之外</option>';
music.innerHTML+=opt;
}
// write将任意的字符串插入到文档中
document.write("<h2>您好</h2>");
// insertBefore()
var li=document.createElement("li");
var txt=document.createTextNode("粉色");
li.appendChild(txt);
document.getElementById("red").parentElement.insertBefore(li,document.getElementById("red"));
</script>
</html>
JavaScript.7z （23个子文件） 
系统对话框.html 1KB 常用事件.html 2KB 函数.html 744B 时间函数.html 1KB 事件.html 784B location对象.html 697B 创建和插入节点.html 6KB 打开窗口.html 877B 相等和全等.html 342B 数据类型.html 2KB 对象的序列化和反序列化.html 701B 获取单选按钮.html 1017B 获取input元素.html 2KB 变量.html 2KB 类型转换.html 1KB 事件处理程序.html 2KB
hello.jpg 7KB 对象.html 2KB
test.js 21B 获取节点.html 3KB 基本用法.html 1KB 数组.html 946B JS表单.html 1KB资源评论
