JS簡單添加元素新節(jié)點的方法示例
更新時間：2018年02月10日 11:27:39 作者：群女神的熊寶
這篇文章主要介紹了JS簡單添加元素新節(jié)點的方法,結(jié)合實例形式分析了javascript針對頁面元素節(jié)點的創(chuàng)建、添加、克隆等相關(guān)操作技巧,需要的朋友可以參考下
本文實例講述了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>
運行效果截圖：
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript頁面元素操作技巧總結(jié)》、《JavaScript操作DOM技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript錯誤與調(diào)試技巧總結(jié)》
希望本文所述對大家JavaScript程序設計有所幫助。
相關(guān)文章
詳解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)技術(shù)的不斷發(fā)展，遠程控制技術(shù)越來越重要，本文將詳細介紹?JS?實現(xiàn)遠程控制的基本原理、開發(fā)流程和實現(xiàn)方法,需要的朋友可以參考下2023-06-06
JavaScript null和undefined區(qū)別分析
在JavaScript開發(fā)中，被人問到：null與undefined到底有啥區(qū)別？
2009-10-10 
axios如何利用promise無痛刷新token的實現(xiàn)方法
這篇文章主要介紹了axios如何利用promise無痛刷新token的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-08-08 
bootstrap-fileinput是基于bootstrap的上傳控件。此控件在網(wǎng)上可以找到很多例子，接下來通過本文給大家分享bootstrap fileinput的使用教程，非常不錯，感興趣的朋友一起看看吧
2016-12-12 
這篇文章主要介紹了ES6 對象的新功能與解構(gòu)賦值介紹，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-02-02 
JavaScript ECMA-262-3 深入解析（二）：變量對象實例詳解
這篇文章主要介紹了JavaScript ECMA-262-3變量對象,結(jié)合實例形式詳細分析了JavaScript ECMA變量對象相關(guān)概念、原理、用法及操作注意事項,需要的朋友可以參考下
2020-04-04 
TypeScript中interface和type的區(qū)別詳解
本文主要介紹了TypeScript中interface和type的區(qū)別詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2023-07-07 
這篇文章主要為大家介紹了JS技巧Canvas?性能優(yōu)化臟矩形渲染實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-01-01