JavaScript實作自動產生網頁元素功能（按鈕、文字等）

首頁

web前端

js教程

JavaScript實作自動產生網頁元素功能（按鈕、文字等）_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:30 PM

建立元素的方法：

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實現自動產生網頁元素功能的方法，希望對大家的學習有所幫助。

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

gmail信箱登陸入口在哪裡

7746

Java教學

1643

CakePHP 教程

1397

Laravel 教程

1291

PHP教程

1234

Related knowledge

前端熱敏紙小票打印遇到亂碼問題怎麼辦？ Apr 04, 2025 pm 02:42 PM

前端熱敏紙小票打印的常見問題與解決方案在前端開發中，小票打印是一個常見的需求。然而，很多開發者在實...

神秘的JavaScript：它的作用以及為什麼重要 Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。