动态创建dom元素

一、动态创建dom元素

   //创建input标签
   var ipt = document.createElement("input");
   //设置type属性
   ipt.type = "button";
   //设置值
   ipt.value = "按钮";
   console.log(ipt);

二、将创建的元素动态追加到页面元素

1. appendChild()------子元素追加方法

• 追加到当前元素的内容之后

2. 向body里面追加

document.body.appendChild(ipt);

3. 向任意标签追加元素

• insertBefore()----将新的节点插入已有的节点之前
• insertBefore()只有这一个方法
• document.body.insertBefore(要插入的元素，已有的元素);

<input type="text" id="user"/>
<script>
	document.body.insertBefore(ipt,user);
</script>

• insertAfter()—这个方法不存在，原生js不存在

三、实现insertAfter()方法的功能（插入到一个节点之后）

• 一般想法就是插入到下一个节点之前

Node.prototype.insertAfter = function(newchild,refchild){    
     this.insertBefore(newchild,refchild.nextElementSibling);
     //指的是当前的类对象
}
document.body.insertAfter(ipt,user);

四、移除

1.移除dom元素

	ipt.remove();

2.删除dom元素子集

   var ulmenu=document.querySelector("ul");
   console.log(ulmenu.children);//HTMLCollection [li]
   var firstli=ulmenu.children[0];
   ulmenu.removeChild(firstli);

五、创建字符串标签

   var s="<input type='text' value='123'/>";
   document.body.innerHTML+=s;
   console.log(document.body.innerHTML);//元素+标签+代码
   console.log(document.body.innerText);//只输出文本

• innerHTML和innerText的区别见https://editor.csdn.net/md/?articleId=111051945