JS簡單添加元素新節(jié)點的方法示例

更新時間：2018年02月10日 11:27:39 作者：群女神的熊寶

這篇文章主要介紹了JS簡單添加元素新節(jié)點的方法,結合實例形式分析了javascript針對頁面元素節(jié)點的創(chuàng)建、添加、克隆等相關操作技巧,需要的朋友可以參考下

本文實例講述了JS簡單添加元素新節(jié)點的方法。分享給大家供大家參考，具體如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>chabaoo.cn - JS添加新節(jié)點的幾種方法</title>
</head>
<body>
<div id="d">
<span id="s">
  1234567890
</span>
</div>
</body>
<script type="text/javascript">
  //首先找到Id為d的元素
  var d=document.getElementById('d');
  //創(chuàng)建一個節(jié)點
  var a=document.createElement('a');
  //設置a的屬性
  a.;
  a.innerText='ggggg';
  //添加元素  將創(chuàng)建的節(jié)點添加到Id為d的div里
  d.appendChild(a);
  //在指定節(jié)點前插入新節(jié)點
  var p=document.createElement('p');
  //添加文本內(nèi)容
  p.innerText='ppppppppppppppppp';
  //d.appendChild(p);
  //參數(shù)1：要添加的元素 參數(shù)2：要放到哪個節(jié)點的前面
  d.insertBefore(p,a);
  //獲取目標元素
  var s=document.getElementById('s');
  //克隆新元素
  var spanc= s.cloneNode(true);//默認參數(shù)是false
  d.appendChild(spanc);
</script>
</html>

運行效果截圖：

更多關于JavaScript相關內(nèi)容感興趣的讀者可查看本站專題：《JavaScript頁面元素操作技巧總結》、《JavaScript操作DOM技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript數(shù)據(jù)結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript錯誤與調(diào)試技巧總結》

希望本文所述對大家JavaScript程序設計有所幫助。

您可能感興趣的文章:

詳解JavaScript原始數(shù)據(jù)類型Symbol
以前提到 JavaScript 原始數(shù)據(jù)類型時，我們知道有Number，String，Null，Boolean，Undefined這幾種。ES6 引入了新的基本數(shù)據(jù)類型Symbol和BigInt。今天我們就來了解下Symbol類型。Symbol類型是為了解決屬性名沖突的問題，順帶還具備模擬私有屬性的功能。
2021-05-05
JS實現(xiàn)遠程控制的基本原理和實現(xiàn)方法
遠程控制是指通過網(wǎng)絡等遠距離通訊手段控制另一設備的操作行為，在現(xiàn)實生活中，隨著物聯(lián)網(wǎng)技術的不斷發(fā)展，遠程控制技術越來越重要，本文將詳細介紹?JS?實現(xiàn)遠程控制的基本原理、開發(fā)流程和實現(xiàn)方法,需要的朋友可以參考下
2023-06-06
上一部分給出的函數(shù)已經(jīng)完全地實現(xiàn)了跨瀏覽器了，但在IE的實現(xiàn)是極其低劣，動用了多個table以及一向為人所詬病的濾鏡。
2009-10-10