createElement() 方法
创建元素节点
appendChild() 方法
向节点的子节点列表的末尾添加新的子节点。
<body><button type="button" id="btn">创建一个div</button><script type="text/javascript">var btn = document.getElementById("btn");btn.onclick = function() {//创建一个节点var div = document.createElement("div");// 给节点添加属性div.style.border = "1px solid red";div.style.width = "200px";div.style.height = "100px";//查看是否创建console.log(div);//在<body>属性中追加一个节点document.body.appendChild(div);}</script></body>
setAttribute() 方法
创建或改变某个属性
element.setAttribute(attributename,attributevalue)
参数
attributename： String。必须，你要添加的属性名称。
attributevalue： String。必须，你要添加的属性值。
<body><button type="button" id="btn">测试</button><input type="text" name="" id="txt" value="测试" /><script type="text/javascript">//获取页面元素var btn = document.getElementById("btn");var txt = document.getElementById("txt");// 点击事件btn.onclick = function() {// 将文本框的属性更改为按钮txt.setAttribute("type", "button");}</script></body>
可以用来添加类名
element.setAttribut(“class”,“cl”);
但一般可以使用
element.classname=“cl”;
innerHTML 属性
用于设置文本或设置标签
<body><button type="button" id="btn">测试</button><div id="box"></div><script type="text/javascript">// 获取页面元素var btn = document.getElementById("btn");var box = document.getElementById("box");btn.onclick = function() {// 向div内添加内容box.innerHTML = "text";}</script></body>
<body><button type="button" id="btn">测试</button><div id="box"></div><script type="text/javascript">// 获取页面元素var btn = document.getElementById("btn");var box = document.getElementById("box");btn.onclick = function() {// 向div内添加内容box.innerHTML = "<h1>text</h1>";}</script></body>
