111111
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>form.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<div id="city"></div>
</body>
<script language="JavaScript">
//在div层中插入 <h1>今天</h1>
//方法一
// //1 创建<h1>今天</h1>
// var h1Element = document.createElement("h1");
// var textElement = document.createTextNode("今天");
// h1Element.appendChild(textElement);
//
// //2 获取div
// var divElement = document.getElementById("city");
//
// //3 插入
// divElement.appendChild(h1Element);
//方法二
document.getElementById("city").innerHTML = "<h1>今天</h1>";
</script>
</html>
2222222222222222222222222222222222222222222222222222222222222
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>insertBefore.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li id="sh" name="shanghai">上海</li>
<li id="cq" name="chongqing">重庆</li>
</ul>
</body>
<script language="JavaScript">
//删除<ul id="city"> 下<li id="bj" name="beijing">北京</li>这个节点</ul>
//1 获取北京节点
var bjElement = document.getElementById("bj");
//2 获取父元素
var parentElement = bjElement.parentNode;
//3 删除
parentElement.removeChild(bjElement);
</script>
</html>
33333333333333333333333333333333333333333333333333333333
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>insertBefore.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
<ul>
<li id="bj" name="beijing">北京</li>
<li id="sh" name="shanghai">上海</li>
<li id="cq" name="chongqing">重庆</li>
</ul>
</body>
<script language="JavaScript">
// 插入新的节点 <li id="tj" name="tianjin">天津</li>
// 在 <li id="cq" name="chongqing">重庆</li>的前面
//1 创建<li id="tj" name="tianjin">天津</li>
//1 <li></li>
var liElement = document.createElement("li");
//2 设置属性
liElement.setAttribute("id","tj");
liElement.setAttribute("name","tianjin");
//3 创建文本节点
var textElement = document.createTextNode("天津");
//4 插入
liElement.appendChild(textElement);
//2 获取重庆节点
var cqElement = document.getElementById("cq");
//3 获取重庆节点的父节点
var parentElement = cqElement.parentNode;
//4 插入
parentElement.insertBefore(liElement,cqElement);
</script>
</html>
4444444444444444444444444444444444444444444444444444444444444444
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>form.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<select name="edu" id="edu">
<option value="博士">博士^^^^^</option>
<option value="硕士">硕士^^^^^</option>
<option value="本科">本科^^^^^</option>
<option value="幼儿园">幼儿园^^^^^</option>
</select>
</body>
<script language="JavaScript">
//增加节点<option value="大专">大专^^^^^</option>
//1 创建<option value="大专">大专^^^^^</option>
//1 <option></option>
var optionElement = document.createElement("option"); //创建元素节点createElement()，传入的是标签名
//2 设置属性<option value="大专"></option>
optionElement.setAttribute("value","大专");
//3 创建一个文本节点
var textElement = document.createTextNode("大专^^^^^"); //创建文本节点createTextNode()，传入的是文本内容
//4 文本节点插入到option标签，<option value="大专">大专^^^^^</option>
optionElement.appendChild(textElement); //插入子元素，appendChild(传入子元素内容)
//2 获取select标签
var eduElement = document.getElementById("edu");
//3 插入
eduElement.appendChild(optionElement);
</script>
</html>