JavaScript

1、在指定元素前后插入新元素

元素前

appendChild方法可以在DOM文档流中指定的元素后追加利用 createElement（创建元素，标签内容）方法和 createTextNode（创建文本，标签之间的内容）方法创建的新元素，但是appendChild追加的元素都是子元素，不可以现实我们需要下面说的在指定元素前或后插入新元素的方案。

可以通过 Jquery 添加 https://blog.****.net/Roobert_Chao/article/details/88843957

• insertBefore() 方法，可以实现把一个新元素插入到现在元素的前面，与现有元素形成兄弟关系。
• 认识以下属性：
  1、新元素，你想插入的新元素（newElement）
  2、目标元素，你想把新元素插入到哪个元素的前面（targetELement）
  3、父元素，目标元素的父元素（parentNode）
  

元素后

• JavaScript 没有给我们提供在目标元素后面加入新元素的函数，我们这里可以自己写。
  

### 自定义在元素后边插入元素
function insertAfter(newElement,targetElement){
	var parent = targetElement.parentNode;
	if(parent.lastChild == targetElement){
		parent.appendChild(newElement);
	}else{
		parent.insertBefore(newElement,targetElement.nextSibling);
	}
}
### 实现自定义的方法
window.onload = function(){
	var para = document.createElement("p");	//	新建标签元素
	var txt = document.createTextNode("Hello World");	//	文本元素
	var add= document.getElementById("add");	//	获取指定元素
	para.appendChild(txt);		//	元素追加
	insertAfter(para,add);
}

HTML

input 属性

pattern 属性。

pattern用于验证表单输入的内容，通常HTML5的type属性，比如email、tel、number、data类、url等，已经自带了简单的数据格式验证功能了，加上pattern后，前端部分的验证更加简单高效了。pattern 的使用

• 正则表达式的运用

placeholder

placeholder 属性适用于下面的 input 类型：text、search、url、tel、email 和 password。
<input type='text' name='reduce' id='reduce' placeholder='提示内容'/>元 <br>

• 为 placeholder 添加颜色。

### style.css
<style>
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #909;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #909;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #909;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #909;
}
</style>

• 还可以通过 JS 编写内容

<script>
window.function(){
  text.oninvalid=function(){
    text.setCustomValidity("请输入正确格式的手机号码");
  };
}
</script>

required

input 的 validationMessage 和 validity 打印出来是：

1. validationMessage: ‘请填写此字段。’
2. patternMismatch: false
3. valid: false // 当前输入无效
4. valueMissing: true

• 自定义 required 的内容（Html5 新增表单事件 oninput,oninvalid及setCustomValidity设置提示信息）。
  用户输入的时候使用setCustomValidity(’’)将错误提示设置为空字符串，在输入不合法时用setCustomValidity(‘自定义提示信息’)来替换提示信息
  
  
• HTML DOM addEventListener() 方法
• 捕获和冒泡的区别 官方示例

### 捕获：从外向里层层捕获
element.addEventListener(event, function, true);
### 冒泡：从里向外层层冒出
element.addEventListener(event, function, false);

• 上述图片中的内容，
  (1) 只要有一个验证方面错误，某个属性就为true，valid值为false。
  (2) 只有没有任何验证错误，所有的属性都为false，valid才能为true。
  (3) 上述的每个错误在浏览器内部都有一个预定义的错误提示消息。
  (4) 所有的错误消息中，浏览器自定义的错误消息优先级高于浏览器预定义的错误消息。
  (5) 当前没有自定义错误消息，所以customError : false 。