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

 更新时间:2015年11月21日 10:26:41   作者:YX_blog   我要评论

这篇文章主要介绍了JavaScript实现自动生成网页元素功能,文章列出了三种可以进行增删改克隆按钮、文本等元素的方法,感兴趣的小伙伴们可以参考一下

创建元素的方法:

  • 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); 
 } 

效果图:

全部的源代码:

<!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实现自动生成网页元素功能的方法,希望对大家的学习有所帮助。

相关文章

  • js中innerText/textContent和innerHTML与target和currentTarget的区别

    js中innerText/textContent和innerHTML与target和currentTarget的

    今天小编就为大家分享一篇关于js中innerText/textContent和innerHTML与target和currentTarget的区别,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-01-01
  • Javascript函数的参数

    Javascript函数的参数

    本文给大家分享的是网易云课堂中金旭亮老师的课堂笔记,对于大家学习javascript非常有帮助,这里推荐给小伙伴们
    2015-07-07
  • 用js将内容复制到剪贴板兼容浏览器

    用js将内容复制到剪贴板兼容浏览器

    通过js将内容复制到剪贴板,本来不难,可是若考虑到浏览器的兼容性问题,就变的有点麻烦,借助flash实现浏览器的兼容
    2014-03-03
  • javascript中的this详解

    javascript中的this详解

    avaScript 中的 this 关键字,深入浅出的分析其在不同情况下的含义,形成这种情况的原因以及 Dojo 等 JavaScript 工具中提供的绑定 this 的方法。可以这样说,正确掌握了 JavaScript 中的 this 关键字,才算迈入了 JavaScript 这门语言的门槛。
    2014-12-12
  • JavaScript 常用函数库详解

    JavaScript 常用函数库详解

    在WEB开发中,javascript提供了许多函数供开发人员使用,这些函数在Ajax流行前足够了,但要构建一个交互性强些的应用恐怕就麻烦了。
    2009-10-10
  • 一个炫酷的Bootstrap导航菜单

    一个炫酷的Bootstrap导航菜单

    这篇文章主要为大家详细介绍了一个炫酷的Bootstrap导航菜单的制作方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • Bootstrap实现带暂停功能的轮播组件(推荐)

    Bootstrap实现带暂停功能的轮播组件(推荐)

    最近小编在项目中用到了一款带轮播组件,功能非常齐全,可以设置各种标题样式、动画效果、轮播时间、开始暂停等功能,下面小编通过本文给大家详细介绍下实现过程,需要的朋友参考下吧
    2016-11-11
  • javascript 实现 秒杀,团购 倒计时展示的记录 分享

    javascript 实现 秒杀,团购 倒计时展示的记录 分享

    这篇文章介绍了javascript 实现 秒杀,团购 倒计时展示的记录方法,有需要的朋友可以参考一下
    2013-07-07
  • js实现div闪烁原理及实现代码

    js实现div闪烁原理及实现代码

    闪烁的原理是什么呢:其实就一个,display在none与block之间频繁的交替,这样说你明白了么,示例代码如下,希望对大家有所帮助
    2014-06-06
  • JavaScript 自动分号插入(JavaScript synat:auto semicolon insertion)

    JavaScript 自动分号插入(JavaScript synat:auto semicolon ins

    今天在看《Extjs中文手册》的时候,写了四五行样例代码,结果IE和Firefox一直报错不通过。
    2009-11-11

最新评论