function changeDom2() { var father = document.getElementById("regForm"); var ipt = document.createElement("input"); ipt.type = "text"; father.appendChild(ipt); } <button>追加子结点对象</button>
3)（父结点）在指定结点前添加子结点
fatherNode.insertBefore(新结点对象，参考结点对象)
function changeDom3() { var father = document.getElementById("regForm"); var refChild = document.getElementById("brid"); var newChild = document.createElement("input"); newChild.type = "text"; father.insertBefore(newChild, refChild); } <button>插入子结点对象</button>
4)（父结点）替换旧的子结点对象
fatherNode.replaceChild(新结点对象，旧结点对象)
function changeDom4() { var father = document.getElementById("regForm"); var refChild = document.getElementById("brid"); var newChild = document.createElement("input"); newChild.type = "text"; father.replaceChild(newChild, refChild); } <button>替换子结点对象</button>
5)（父结点）删除旧子结点对象
function changeDom5() { var father = document.getElementById("regForm"); var refChild = document.getElementById("nickid"); father.removeChild(refChild); } <button>删除子结点对象</button>
动态改变元素的CSS样式（不重要）
<style type="text/css"> .addstyle{ color: red; font-size: 72px; text-decoration: underline; } </style> <script type="application/javascript"> /* 5.动态改变元素的css样式 1)我们通过对象.style属性操作对象的css样式：样式名称中有“-”将“-”去掉，并将“-”后一个字母改为大写来作为样式的新名称 2)我们希望通过class为一个对象添加一个class样式，添加属性名是className，而并非class（class是js的关键字，并能作为属性名存在） */ function fontGreater(){ var myDiv = document.getElementById("myDiv"); console.log(myDiv); myDiv.style.fontSize = "36px"; myDiv.style.fontFamily = "宋体"; } function changeFont(){ var myDiv = document.getElementById("myDiv"); myDiv.className = "addstyle"; //myDiv.setAttribute("class","addstyle"); } </script> </head> <body> <button>放大字体</button> <button>添加样式</button> <div >你好世界！</div> </body>