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中yield实用简洁实现方式
Jun 12 Javascript
JQuery文本框高亮显示插件代码
Apr 02 Javascript
JS 有趣的eval优化输入验证实例代码
Sep 22 Javascript
js实现仿Windows风格选项卡和按钮效果实例
May 13 Javascript
老生常谈JavaScript 正则表达式语法
Aug 20 Javascript
基于jQuery实现表格的排序
Dec 02 Javascript
React学习笔记之事件处理(二)
Jul 02 Javascript
js array数组对象操作方法汇总
Mar 18 Javascript
微信小程序一周时间表功能实现
Oct 17 Javascript
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
Feb 23 Javascript
JavaScript中交换值的10种方法总结
Aug 18 Javascript
微信小程序实现日历签到
Sep 21 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
PHP5+UTF8多文件上传类
2008/10/17 PHP
php实现多张图片上传加水印技巧
2013/04/18 PHP
深入PHP数据加密详解
2013/06/18 PHP
php简单图像创建入门实例
2015/06/10 PHP
PHP编程求最大公约数与最小公倍数的方法示例
2017/05/29 PHP
比较简单的异步加载JS文件的代码
2009/07/18 Javascript
JS函数实现动态添加CSS样式表文件
2012/12/15 Javascript
IE与FireFox的JavaScript兼容问题解决办法
2013/12/31 Javascript
jquery中each方法示例和常用选择器
2014/07/08 Javascript
js实现兼容IE和FF的上下层的移动
2015/05/04 Javascript
使用ajaxfileupload.js实现上传文件功能
2016/08/13 Javascript
jQuery动态移除和添加背景图片的方法详解
2017/03/07 Javascript
vue使用drag与drop实现拖拽的示例代码
2017/09/07 Javascript
JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例
2018/02/08 Javascript
vue获取当前点击的元素并传值的实例
2018/03/09 Javascript
Vue项目使用CDN优化首屏加载问题
2018/04/01 Javascript
Angular5中状态管理的实现
2018/09/03 Javascript
element-ui中按需引入的实现
2019/12/25 Javascript
vue项目创建步骤及路由router
2020/01/14 Javascript
[02:50]2014DOTA2 TI预选赛预选赛 大神专访第一弹!
2014/05/21 DOTA
[07:08]2014DOTA2西雅图国际邀请赛 小组赛7月11日TOPPLAY
2014/07/11 DOTA
python实现数独算法实例
2015/06/09 Python
Python中修改字符串的四种方法
2018/11/02 Python
python threading和multiprocessing模块基本用法实例分析
2019/07/25 Python
解决django接口无法通过ip进行访问的问题
2020/03/27 Python
python matplotlib实现将图例放在图外
2020/04/17 Python
canvas 基础之图像处理的使用
2020/04/10 HTML / CSS
Smashbox官网:美国知名彩妆品牌
2017/01/05 全球购物
四种会话跟踪技术
2015/05/20 面试题
家长对孩子评语
2014/01/30 职场文书
软件部经理岗位职责范本
2014/02/25 职场文书
学校党委干部个人对照检查材料思想汇报
2014/10/09 职场文书
党员教师群众路线个人整改措施
2014/10/28 职场文书
工作收入证明范本
2015/06/12 职场文书
创业计划书之暑假培训班
2019/11/09 职场文书
python中的装饰器该如何使用
2021/06/18 Python