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 相关文章推荐
倒记时60刷新网页的js代码
Feb 18 Javascript
详解JavaScript中的blink()方法的使用
Jun 08 Javascript
解决jquery中动态新增的元素节点无法触发事件问题的两种方法
Oct 30 Javascript
JavaScript如何实现对数字保留两位小数一位自动补零
Dec 18 Javascript
javascript代码调试之console.log 用法图文详解
Sep 30 Javascript
深入了解JavaScript的逻辑运算符(与、或)
Dec 20 Javascript
最常见和最有用的字符串相关的方法详解
Feb 06 Javascript
解决vue build打包之后首页白屏的问题
Mar 06 Javascript
微信小程序开发之改变data中数组或对象的某一属性值
Jul 05 Javascript
解决cordova+vue 项目打包成APK应用遇到的问题
May 10 Javascript
Electron整合React使用搭建开发环境的步骤详解
Jun 07 Javascript
如何通过Proxy实现JSBridge模块化封装
Oct 22 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
五款PHP代码重构工具推荐
2014/10/14 PHP
mysql_connect localhost和127.0.0.1的区别(网络层阐述)
2015/03/26 PHP
cnblogs csdn 代码运行框实现代码
2009/11/02 Javascript
jquery子元素过滤选择器使用示例
2013/06/24 Javascript
JS不间断向上滚动效果代码
2013/12/25 Javascript
js写的方法实现上传图片之后查看大图
2014/03/05 Javascript
JavaScript获取表单内所有元素值的方法
2015/04/02 Javascript
js判断浏览器类型及设备(移动页面开发)
2015/07/30 Javascript
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
2015/08/11 Javascript
BootStrap智能表单实战系列(十一)级联下拉的支持
2016/06/13 Javascript
AngularJS 过滤与排序详解及实例代码
2016/09/14 Javascript
js阻止移动端页面滚动的两种方法
2017/01/25 Javascript
JS实现table表格内针对某列内容进行即时搜索筛选功能
2018/05/11 Javascript
Vue匿名插槽与作用域插槽的合并和覆盖行为
2019/04/22 Javascript
JS简单表单验证功能完整示例
2020/01/26 Javascript
vue中父子组件传值,解决钩子函数mounted只运行一次的操作
2020/07/27 Javascript
PHP读取远程txt文档到数组并实现遍历
2020/08/25 Javascript
vue组件是如何解析及渲染的?
2021/01/13 Vue.js
[50:12]EG vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
为python设置socket代理的方法
2015/01/14 Python
Python中threading模块join函数用法实例分析
2015/06/04 Python
python中dir()与__dict__属性的区别浅析
2018/12/10 Python
python Opencv计算图像相似度过程解析
2019/12/03 Python
Python爬虫教程知识点总结
2020/10/19 Python
python爬虫爬取图片的简单代码
2021/01/18 Python
施华洛世奇水晶荷兰官方网站:SWAROVSKI荷兰
2017/05/12 全球购物
Lookfantastic德国官网:英国知名美妆购物网站
2017/06/11 全球购物
维多利亚的秘密官方旗舰店:VICTORIA’S SECRET
2018/04/02 全球购物
编写一个 C 函数,该函数在一个字符串中找到可能的最长的子字符串,且该字符串是由同一字符组成的
2015/07/23 面试题
办公室主任岗位承诺书
2014/05/29 职场文书
建筑工地质量标语
2014/06/12 职场文书
五四演讲稿范文
2014/09/03 职场文书
2015年“我们的节日·重阳节”活动总结
2015/07/29 职场文书
小学班主任研修日志
2015/11/13 职场文书
2016年心理学教育培训学习心得体会
2016/01/12 职场文书
MongoDB日志切割的三种方式总结
2021/09/15 MongoDB