JavaScript实现自动生成网页元素功能(按钮、文本等)


Posted in Javascript onNovember 21, 2015

创建元素的方法:

  • 1、利用createTextNode()创建一个文本对象
  • 2、利用createElement()创建一个标签对象
  • 3、直接利用容器标签中的一个属性:innerHTML-----本质上改该标签容器中的“html代码”,不是我们认为的对象树的操作

详解代码:

<body> 
 <input type="button" value="创建并添加节点1" onclick="addNode1()"/> 
 <input type="button" value="创建并添加节点2" onclick="addNode2()"/> 
 <input type="button" value="创建并添加节点3" onclick="addNode3()"/> 
 <input type="button" value="remove节点1 " onclick='removenode()'/> 
 <input type="button" value="replaceNode节点2替换 " onclick='remove2()'/><!--1替换2,并且1没有保留--> 
 <input type="button" value="clone替换 " onclick='clone()'/> 
 <div id="div_id1">这是div模块--</div> 
 <div id="div_id2">必须好好地学习,这样才能让自己有很好的回报</div> 
 <div id="div_id3">好好干,加油?(^ω^)?</div> 
 <div id="div_id4">你懂得区域,实验区域</div>   
</body>

方式一 :创建文本文档

<span style="font-size:18px;">function addNode1(){ 
   //1利用createTextNode()创建一个文本对象 
   var text=document.createTextNode("这是修改的,创建的文档"); 
   //2获取div对象 
   var node1=document.getElementById("div_id1"); 
   //添加成div对象的孩子 
   node1.appendChild(text);}</span><span style="font-size:24px;"> 
</span>

方式二:利用createElement()创建一个标签对象

function addNode2(){ 
   //1,利用createElement()创建一个标签对象 
   var nn=document.createElement("input"); 
   nn.type="button" 
   nn.value="创建的按钮"; 
   nn.target="_blank"; 
   //2,获得div对象 
   var node2=document.getElementById("div_id2"); 
   //添加成div对象的孩子 
   node2.appendChild(nn); 
  }

方式三:直接利用容器标签中的一个属性:innerHTML-----本质上改该标签容器中的“html代码”,不是我们认为的对象树的操作

function addNode3(){ 
    var mm=document.getElementById("div_id3"); 
    mm.innerHTML="<a href='http://www.baidu.com'><input type='button' value='新建的按钮'></a>"; 
    }
  • 删除节点

使用 removeNode 和 removeChild 从元素上删除子结点两种方法,通常采用第二种方法

function removenode(){ 
   var node =document.getElementById("div_id4"); 
//   alert(node.nodeName);//DIV 
//  自杀式 node.removeNode(true); //removeNode 从文档层次中删除对象。ie可以出现现象,一般不采用自杀式 
   node.parentNode.removeChild(node);////通过父节点去删除它的孩子,一般常用 
   alert("aa"); 
  }
  • 替换 没有保留替换的那个
function remove2(){ 
   var node1 =document.getElementById("div_id1"); 
   var node2 =document.getElementById("div_id2"); 
//   node1.replaceNode(node2);//自杀式不通用 
////通过父节点去替换它的孩子:用node1去替换node2 
   node1.parentNode.replaceChild(node1,node2);//object.replaceChild(oNewNode, oChildNode) 
  }
  • clone节点
function clone(){ 
  var node1 =document.getElementById("div_id1"); 
  var node2 =document.getElementById("div_id2"); 
  var node1_2=node1.cloneNode(true);//false只能clone基本的,不会clone下面的其他子节点 
  //克隆一个对象,默认参数为false。参数为true时,连子节点一起克隆 
  node1.parentNode.replaceChild(node1_2,node2); 
 }

效果图:

JavaScript实现自动生成网页元素功能(按钮、文本等)

全部的源代码:

<!DOCTYPE html> 
<html> 
 <head> 
 <title>DOM_operation.html</title> 
 <style type="text/css"> 
  div{ 
   border:#00f solid 1px; 
   width:200px; 
   height:100px; 
  } 
 </style> 
 <script type="text/javascript"> 
//AAAA 增  
  //方式一 创建文本文档 
  function addNode1(){ 
   //1利用createTextNode()创建一个文本对象 
   var text=document.createTextNode("这是修改的,创建的文档"); 
   //2获取div对象 
   var node1=document.getElementById("div_id1"); 
   //添加成div对象的孩子 
   node1.appendChild(text); 
  } 
   
  function addNode2(){ 
   //1,利用createElement()创建一个标签对象 
   var nn=document.createElement("input"); 
   nn.type="button" 
   nn.value="创建的按钮"; 
   nn.target="_blank"; 
   //2,获得div对象 
   var node2=document.getElementById("div_id2"); 
   //添加成div对象的孩子 
   node2.appendChild(nn); 
  } 
   
  //直接利用容器标签中的一个属性:innerHTML-----本质上改该标签容器中的“html代码”,不是我们认为的对象树的操作 
  function addNode3(){ 
    var mm=document.getElementById("div_id3"); 
    mm.innerHTML="<a href='http://www.baidu.com'><input type='button' value='新建的按钮'></a>"; 
     
  } 
//BBBBBB-------删   
  //删除节点 使用 removeNode 和 removeChild 从元素上删除子结点两种方法,通常采用第二种方法 
  function removenode(){ 
   var node =document.getElementById("div_id4"); 
//   alert(node.nodeName);//DIV 
//  自杀式 node.removeNode(true); //removeNode 从文档层次中删除对象。ie可以出现现象,一般不采用自杀式 
   node.parentNode.removeChild(node);////通过父节点去删除它的孩子,一般常用 
   alert("aa"); 
  } 
  //替换 没有保留替换的那个 
  function remove2(){ 
   var node1 =document.getElementById("div_id1"); 
   var node2 =document.getElementById("div_id2"); 
//   node1.replaceNode(node2);//自杀式不通用 
////通过父节点去替换它的孩子:用node1去替换node2 
   node1.parentNode.replaceChild(node1,node2);//object.replaceChild(oNewNode, oChildNode) 
  } 
  function clone(){ 
   var node1 =document.getElementById("div_id1"); 
   var node2 =document.getElementById("div_id2"); 
   var node1_2=node1.cloneNode(true);//false只能clone基本的,不会clone下面的其他子节点 
   //克隆一个对象,默认参数为false。参数为true时,连子节点一起克隆 
   node1.parentNode.replaceChild(node1_2,node2); 
  } 
 </script> 
 </head> 
 
 <body> 
 <input type="button" value="创建并添加节点1" onclick="addNode1()"/> 
 <input type="button" value="创建并添加节点2" onclick="addNode2()"/> 
 <input type="button" value="创建并添加节点3" onclick="addNode3()"/> 
 <input type="button" value="remove节点1 " onclick='removenode()'/> 
 <input type="button" value="replaceNode节点2替换 " onclick='remove2()'/><!--1替换2,并且1没有保留--> 
 <input type="button" value="clone替换 " onclick='clone()'/> 
 <div id="div_id1">这是div模块--</div> 
 <div id="div_id2">必须好好地学习,这样才能让自己有很好的回报</div> 
 <div id="div_id3">好好干,加油?(^ω^)?</div> 
 <div id="div_id4">你懂得区域,实验区域</div> 
  
  
 </body> 
</html>

以上就是为大家分享如何通过JavaScript实现自动生成网页元素功能的方法,希望对大家的学习有所帮助。

Javascript 相关文章推荐
用Javascript做flash做的事..才完成的一个类.Auntion Action var 0.1
Feb 23 Javascript
js 判断 enter 事件
Feb 12 Javascript
jquery的live使用注意事项
Feb 18 Javascript
理解JS事件循环
Jan 07 Javascript
基于javascript实现精确到毫秒的倒计时限时抢购
Apr 17 Javascript
JavaScript String 对象常用方法详解
May 13 Javascript
JavaScript控制输入框中只能输入中文、数字和英文的方法【基于正则实现】
Mar 03 Javascript
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 jQuery
vue单页应用的内存泄露定位和修复问题小结
Aug 02 Javascript
详解基于Vue/React项目的移动端适配方案
Aug 23 Javascript
layer页面跳转,获取html子节点元素的值方法
Sep 27 Javascript
Javascript中Math.max和Math.max.apply的区别和用法详解
Aug 24 Javascript
javascript实现Email邮件显示与删除功能
Nov 21 #Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件包装
Nov 20 #Javascript
Jquery ajax基础教程
Nov 20 #Javascript
谈谈Jquery ajax中success和complete有哪些不同点
Nov 20 #Javascript
jQuery实现带玻璃流光质感的手风琴特效
Nov 20 #Javascript
JQuery.Ajax()的data参数类型实例详解
Nov 20 #Javascript
Jquery Ajax Error 调试错误的技巧
Nov 20 #Javascript
You might like
全国FM电台频率大全 - 16 河南省
2020/03/11 无线电
php安全配置 如何配置使其更安全
2011/12/16 PHP
php防止伪造数据从地址栏URL提交的方法
2014/08/24 PHP
laradock环境docker-compose操作详解
2019/07/29 PHP
jQuery中的编程范式详解
2014/12/15 Javascript
jQuery中wrapAll()方法用法实例
2015/01/16 Javascript
AngularJS中的模块详解
2015/01/29 Javascript
利用JS判断字符串是否含有数字与特殊字符的方法小结
2016/11/25 Javascript
将 vue 生成的 js 上传到七牛的实例
2017/07/28 Javascript
jQuery完成表单验证的实例代码(纯代码)
2017/09/30 jQuery
JavaScript一元正号运算符示例代码
2019/06/30 Javascript
Vue封装的组件全局注册并引用
2019/07/24 Javascript
微信小程序实现手势滑动卡片效果
2019/08/26 Javascript
Vue实现图书管理小案例
2020/12/03 Vue.js
JavaScript canvas实现雨滴特效
2021/01/10 Javascript
跟老齐学Python之从if开始语句的征程
2014/09/14 Python
在Django的视图中使用form对象的方法
2015/07/18 Python
Python md5与sha1加密算法用法分析
2017/07/14 Python
在python中使用正则表达式查找可嵌套字符串组
2017/10/24 Python
Python机器学习之SVM支持向量机
2017/12/27 Python
Python实现处理逆波兰表达式示例
2018/07/30 Python
Python实现删除排序数组中重复项的两种方法示例
2019/01/31 Python
在OpenCV里使用特征匹配和单映射变换的代码详解
2019/10/23 Python
pytorch GAN伪造手写体mnist数据集方式
2020/01/10 Python
如何使用python代码操作git代码
2020/02/29 Python
python 链接sqlserver 写接口实例
2020/03/11 Python
解决django无法访问本地static文件(js,css,img)网页里js,cs都加载不了
2020/04/07 Python
基于HTML5 Canvas 实现商场监控实例详解
2017/11/20 HTML / CSS
高级电工工作职责
2013/11/21 职场文书
平安校园建设方案
2014/05/02 职场文书
企业文化标语大全
2014/06/10 职场文书
企业年检委托书范本
2014/10/14 职场文书
刑事附带民事诉讼答辩状
2015/05/22 职场文书
走进科学观后感
2015/06/18 职场文书
在pycharm中无法import所安装的库解决方案
2021/05/31 Python
MySQL中一条update语句是如何执行的
2022/03/16 MySQL