这篇文章主要介绍了 javascript 动态创建及删除元素的方法, 涉及针对 DOM 元素操作的技巧, 非常具有实用价值, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文实例讲述了 javascript 动态创建及删除元素的方法。分享给大家供大家参考。具体分析如下:
在 DOM 中我们可以方便快速的动态删除与删除 dom 元素,这里我们就来给各位朋友简单的介绍一下。
例 1:
动态创建一个按钮
- <html>
- <head>
- <title>
- 动态创建按钮
- </title>
- <script language="javascript">
- var a, b, ab, ba, c;
- function createInputA() {
- a = document.createElement("input"); //使用DOM的创建元素方法
- a.type = "button"; //设置元素的类型
- a.value = "按钮A"; //设置元素的值
- a.attachEvent("onclick", addInputB); //为控件添加事件
- document.body.appendChild(a); //添加控件到窗体中
- //a = null; //释放对象
- }
例 2:
动态创建多个表单:
- <html>
- <head>
- <script type="text/javascript">
- window.onload = function() {
- var aBtn = document.createElement("input");
- var bBtn = document.createElement("input");
- var cBtn = document.createElement("input");
- aBtn.type = "button";
- aBtn.value = "按钮A";
- aBtn.onclick = copyBtn;
- bBtn.type = "button";
- bBtn.value = "按钮B";
- bBtn.onclick = copyBtn;
- cBtn.type = "button";
- cBtn.value = "按钮C";
- cBtn.onclick = clearCopyBtn;
- document.body.appendChild(aBtn);
- document.body.appendChild(bBtn);
- document.body.appendChild(cBtn);
- };
- function copyBtn() {
- var btn = document.createElement("input");
- btn.type = "button";
- btn.value = this.value;
- btn.isCopy = true;
- btn.onclick = copyBtn;
- document.body.appendChild(btn);
- }
- function clearCopyBtn() {
- var btns = document.getElementsByTagName("input");
- var length = btns.length;
- for (var i = length - 1; i >= 0; i--) {
- if (btns[i].isCopy) {
- document.body.removeChild(btns[i]);
- }
- }
- }
- </script>
- </head>
- <body>
- </body>
- </html>
希望本文所述对大家的 javascript 程序设计有所帮助。
来源: