Home >Web Front-end >JS Tutorial >JavaScript implements automatic generation of web page elements (buttons, text, etc.)_javascript skills

JavaScript implements automatic generation of web page elements (buttons, text, etc.)_javascript skills

WBOYOriginal: 2016-05-16 15:30:471389browse

Methods to create elements:

1. Use createTextNode() to create a text object
2. Use createElement() to create a label object
3. Directly use an attribute in the container tag: innerHTML - essentially changing the "html code" in the tag container is not an operation of the object tree as we think

Detailed code:

<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>

Method 1: Create a text document

<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>

Method 2: Use createElement() to create a label object

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

Method 3: Directly use an attribute in the container tag: innerHTML-----essentially changing the "html code" in the tag container, which is not an object tree operation as we think

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

Delete node

Use removeNode and removeChild to delete child nodes from an element. The second method is usually used

function removenode(){ 
   var node =document.getElementById("div_id4"); 
//   alert(node.nodeName);//DIV 
//  自杀式 node.removeNode(true); //removeNode 从文档层次中删除对象。ie可以出现现象，一般不采用自杀式 
   node.parentNode.removeChild(node);////通过父节点去删除它的孩子,一般常用 
   alert("aa"); 
  }

Replacement does not retain the replaced one

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 node

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

Rendering:

Full source code:

<!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>

The above is to share with you how to automatically generate web page elements through JavaScript. I hope it will be helpful to your learning.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：nodejs preliminary experience_node.jsNext article：nodejs preliminary experience_node.js

See more

JavaScript implements automatic generation of web page elements (buttons, text, etc.)_javascript skills

Related articles