JS簡(jiǎn)單添加元素新節(jié)點(diǎn)的方法示例
更新時(shí)間：2018年02月10日 11:27:39 作者：群女神的熊寶
這篇文章主要介紹了JS簡(jiǎn)單添加元素新節(jié)點(diǎn)的方法,結(jié)合實(shí)例形式分析了javascript針對(duì)頁(yè)面元素節(jié)點(diǎn)的創(chuàng)建、添加、克隆等相關(guān)操作技巧,需要的朋友可以參考下
本文實(shí)例講述了JS簡(jiǎn)單添加元素新節(jié)點(diǎn)的方法。分享給大家供大家參考，具體如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>www.dbjr.com.cn - JS添加新節(jié)點(diǎn)的幾種方法</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)建一個(gè)節(jié)點(diǎn)
var a=document.createElement('a');
//設(shè)置a的屬性
a.;
a.innerText='ggggg';
//添加元素 將創(chuàng)建的節(jié)點(diǎn)添加到Id為d的div里
d.appendChild(a);
//在指定節(jié)點(diǎn)前插入新節(jié)點(diǎn)
var p=document.createElement('p');
//添加文本內(nèi)容
p.innerText='ppppppppppppppppp';
//d.appendChild(p);
//參數(shù)1：要添加的元素 參數(shù)2：要放到哪個(gè)節(jié)點(diǎn)的前面
d.insertBefore(p,a);
//獲取目標(biāo)元素
var s=document.getElementById('s');
//克隆新元素
var spanc= s.cloneNode(true);//默認(rèn)參數(shù)是false
d.appendChild(spanc);
</script>
</html>
運(yùn)行效果截圖：
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript頁(yè)面元素操作技巧總結(jié)》、《JavaScript操作DOM技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- JS獲取節(jié)點(diǎn)的兄弟,父級(jí),子級(jí)元素的方法
- JS獲取子節(jié)點(diǎn)、父節(jié)點(diǎn)和兄弟節(jié)點(diǎn)的方法實(shí)例總結(jié)
- JS獲取父節(jié)點(diǎn)方法
- js如何獲取兄弟、父類等節(jié)點(diǎn)
- js遍歷子節(jié)點(diǎn)子元素附屬性及方法
- JS實(shí)現(xiàn)DOM刪除節(jié)點(diǎn)操作示例
- JavaScript給每一個(gè)li節(jié)點(diǎn)綁定點(diǎn)擊事件的實(shí)現(xiàn)方法
- JS獲取子、父、兄節(jié)點(diǎn)方法小結(jié)
- js常用節(jié)點(diǎn)操作實(shí)例總結(jié)
相關(guān)文章
詳解JavaScript原始數(shù)據(jù)類型Symbol
以前提到 JavaScript 原始數(shù)據(jù)類型時(shí)，我們知道有Number，String，Null，Boolean，Undefined這幾種。ES6 引入了新的基本數(shù)據(jù)類型Symbol和BigInt。今天我們就來(lái)了解下Symbol類型。Symbol類型是為了解決屬性名沖突的問(wèn)題，順帶還具備模擬私有屬性的功能。2021-05-05
JS實(shí)現(xiàn)遠(yuǎn)程控制的基本原理和實(shí)現(xiàn)方法
遠(yuǎn)程控制是指通過(guò)網(wǎng)絡(luò)等遠(yuǎn)距離通訊手段控制另一設(shè)備的操作行為，在現(xiàn)實(shí)生活中，隨著物聯(lián)網(wǎng)技術(shù)的不斷發(fā)展，遠(yuǎn)程控制技術(shù)越來(lái)越重要，本文將詳細(xì)介紹?JS?實(shí)現(xiàn)遠(yuǎn)程控制的基本原理、開(kāi)發(fā)流程和實(shí)現(xiàn)方法,需要的朋友可以參考下2023-06-06
JavaScript null和undefined區(qū)別分析
在JavaScript開(kāi)發(fā)中，被人問(wèn)到：null與undefined到底有啥區(qū)別？
2009-10-10 
axios如何利用promise無(wú)痛刷新token的實(shí)現(xiàn)方法
這篇文章主要介紹了axios如何利用promise無(wú)痛刷新token的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-08-08 
bootstrap-fileinput是基于bootstrap的上傳控件。此控件在網(wǎng)上可以找到很多例子，接下來(lái)通過(guò)本文給大家分享bootstrap fileinput的使用教程，非常不錯(cuò)，感興趣的朋友一起看看吧
2016-12-12 
這篇文章主要介紹了ES6 對(duì)象的新功能與解構(gòu)賦值介紹，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-02-02 
JavaScript ECMA-262-3 深入解析（二）：變量對(duì)象實(shí)例詳解
這篇文章主要介紹了JavaScript ECMA-262-3變量對(duì)象,結(jié)合實(shí)例形式詳細(xì)分析了JavaScript ECMA變量對(duì)象相關(guān)概念、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下
2020-04-04 
TypeScript中interface和type的區(qū)別詳解
本文主要介紹了TypeScript中interface和type的區(qū)別詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-07-07 
JS技巧Canvas性能優(yōu)化臟矩形渲染實(shí)例詳解
這篇文章主要為大家介紹了JS技巧Canvas?性能優(yōu)化臟矩形渲染實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-01-01