javascript之DOM编程设置节点插入节点
2016-05-24 19:59
441 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript"> /* 创建字节入插入节点、设置节点的属性。 document.createElement("标签名") 创建新元素节点 elt.setAttribute("属性名", "属性值") 设置属性 elt.appendChild(e) 添加元素到elt中最后的位置 */ var num = 1; function add(){ var inputNode = document.createElement("input"); //创建一个指定标签名字的节点。 //setAttribute:设置节点的属性 inputNode.setAttribute("type","button"); inputNode.setAttribute("value","按钮"+num); num++; var bodyNode = document.getElementsByTagName("body")[0]; bodyNode.appendChild(inputNode); //appendChild 添加子节点。 } </script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> <input type="button" onclick="add()" value="添加"/> </body> </html>
效果如下所示:
相关文章推荐
- 工具类系列-JackJsonStringTrimParser
- JavaScript的bom对象
- js显示鼠标坐标
- javascript之DOM编程根据属性找标签练习
- javascript之DOM编程根据属性找标签练习
- javascript之DOM编程通过html元素的标签属性找节点
- javascript之DOM编程通过html元素的标签属性找节点
- Jstorm 集群搭建过程及一键安装部署脚本
- Backbonejs之model
- javascript之DOM文档对象模型编程的引入
- javascript之DOM文档对象模型编程的引入
- [RxJS] Marble diagrams in ASCII form
- 身份证校验的几种js方法
- json解析方法之gson解析,简单粗暴。
- js计算年龄
- js调色板
- JavaScript通过HTML的class来获取HTML元素的方法总结
- js自动选择表单
- jsp自定义标签实现分页
- js自动获得焦点