插入节点
获得某个Dom节点后，假设这dom节点是空的，我们通过innerHTML就可以增加一个元素；但是这个DOM节点已经存在元素了，就不能这么干了，会产生覆盖。
追加
<p id="js">js</p>
<div id="list">
<p id="se">javaSE</p>
<p id="ee">javaEE</p>
<p id="me">javaME</p>
</div>
<script>
var js=document.getElementById('js');
var lise=document.getElementById('list');
list.appendChild(js);//将id="js"的p标签追加到盒子里
</script>
创建一个新的标签，实现插入
<p id="js">js</p>
<div id="list">
<p id="se">javaSE</p>
<p id="ee">javaEE</p>
<p id="me">javaME</p>
</div>
<script>
var js=document.getElementById('js');//已经存在的节点
var list=document.getElementById('list');//已经存在的节点
list.appendChild(js);//将id="js"的p标签追加到盒子里
//通过js创建一个新的节点
var newP=document.createElement('p');
newP.id=newP;
newP.innerText='hello,xcl';
list.appendChild(newP);
//创建一个标签节点(通过这个属性，可以设置任意的值)
var myScript=document.createElement('script');
myScript.setAttribute('type','text/javaScript');
list.appendChild(myScript);
//可以创建一个style标签
var myStyle=document.createElement('style');//创建了一个空的style标签
myStyle.setAttribute('type','text/css');
myStyle.innerHTML='body{background:chartreuse;}';//设置标签内容
document.getElementsByTagName('head')[0].appendChild(myStyle);
</script>
insert
var ee=document.getElementById('ee');
var js=document.getElementById('js');
var list=document.getElementById('list');
//list要包含的节点，insertBefore(newNode,targenNode)
list.insertBefore(js,ee);
8.操作表单（验证）
-
文本框 text
-
下拉框 <select>
-
单选框 radio
-
多选框 checkbox
-
隐藏域 hidden
-
密码框 password
-
.......
表单的目的：提交信息
获得要提交的信息
<form action="post">
<p>
<span>用户名：</span><input type="text" id="uesrname">
</p>
<p>
<!--多选框的值是定义好的value-->
<span>性别：</span>
<input type="radio" name="sex" value="boy" id="man">男
<input type="radio" name="sex" value="girl" id="woman">女
</p>
</form>
<script>
var man_radio=document.getElementById('man');
var woman_radio=document.getElementById('woman');
//对于单选框，多选框等固定的值，boy_radio.value只能取到当前的值
man_radio.checked;//查看返回的结果是否为true，如果为true则被选中
woman_radio.checked=true;// 赋值
var input_text=document.getElementById('uesrname');//得到输入框的值
input_text.value='ttttt';//修改输入框的值
提交表单md5加密密码，表单优化
<!DOCTYPE html>标签：list,pwd,js,getElementById,var,document,Day04 From： https://www.cnblogs.com/xclxcl/p/16789957.html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<!--表单级别加密
<form action="#" method="post" onsubmit="return aaa()">
<p>
<span>用户名：</span><input type="text" id="username" name="username" >
</p>
<p>
<span>密码：</span><input type="password" id="input-password" >
</p>
<input type="hidden" id="md5-password" name="password">
//绑定事件onclick被点击
<button type="submit" onclick="aaa()">提交</button>
</form>
<script>
function aaa(){
var uname=document.getElementById('username');
var pwd=document.getElementById('input-password');
var md5pwd=document.getElementById('md5-password');
//MD5算法
md5pwd.value=md5(pwd.value);
console.log(pwd.value);//把pwd提交的密码加密后传给MD5pwd并隐藏
//可以校验判断表单提交内容，true就是可以通过提交，false组织提交
return false;
}
</script>
-->
<!--按钮加密-->
<form action="#" method="post" >
<p>
<span>用户名：</span><input type="text" id="username" name="username" >
</p>
<p>
<span>密码：</span><input type="password" id="input-password" >
</p>
<input type="hidden" id="md5-password" name="password">
<!--绑定事件onclick被点击-->
<button type="submit" onclick="aaa()">提交</button>
</form>
<script>
function aaa(){
var uname=document.getElementById('username');
var pwd=document.getElementById('input-password');
var md5pwd=document.getElementById('md5-password');
//MD5算法
md5pwd.value=md5(pwd.value);
console.log(pwd.value);//把pwd提交的密码加密后传给MD5pwd并隐藏
}
</script>
</body>
</html>