JS實(shí)現(xiàn)的DOM插入節(jié)點(diǎn)操作示例
本文實(shí)例講述了JS實(shí)現(xiàn)的DOM插入節(jié)點(diǎn)操作。分享給大家供大家參考，具體如下：
一 介紹
插入節(jié)點(diǎn)通過(guò)使用insertBefore()方法來(lái)實(shí)現(xiàn)。
insertBefore()方法將在另一個(gè)子節(jié)點(diǎn)前插入新的子節(jié)點(diǎn)。
obj.insertBefore(new,ref)
new：表示新的子節(jié)點(diǎn)。
ref：指定一個(gè)節(jié)點(diǎn)，在這個(gè)節(jié)點(diǎn)前插入新的節(jié)點(diǎn)。
二 應(yīng)用
插入節(jié)點(diǎn)，本示例在頁(yè)面的文本框中輸入需要插入的文本，然后通過(guò)單擊“前插入”按鈕將文本插入到頁(yè)面中。
三 完整示例代碼：
<!DOCTYPE html>
<html>
<head>
<title>www.dhdzp.com 插入節(jié)點(diǎn)</title>
<script language="javascript">
<!--
function crNode(str)
{
var newP=document.createElement("p");
var newTxt=document.createTextNode(str);
newP.appendChild(newTxt);
return newP;
}
function insetNode(nodeId,str)
{
var node=document.getElementById(nodeId);
var newNode=crNode(str);
if(node.parentNode) //判斷是否擁有父節(jié)點(diǎn)
node.parentNode.insertBefore(newNode,node);
}
-->
</script>
</head>
<body>
<h2 id="h">在上面插入節(jié)點(diǎn)</h2>
<form id="frm" name="frm">
輸入文本：<input type="text" name="txt" />
<input type="button" value="前插入" onclick="insetNode('h',document.frm.txt.value);" />
</form>
</body>
</html>
四 運(yùn)行結(jié)果
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《JavaScript操作DOM技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
跟我學(xué)習(xí)javascript的Date對(duì)象
跟我學(xué)習(xí)javascript的Date對(duì)象，文章主要介紹了Date 日期和時(shí)間對(duì)象的操作，文章末尾為大家附加了兩個(gè)案例，幫助大家更好的學(xué)習(xí)javascript的Date對(duì)象，對(duì)這方面感興趣的小伙伴們可以參考一下2015-11-11
下面小編就為大家?guī)?lái)一篇淺談js的異步執(zhí)行。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
VSCode 添加自定義注釋的方法(附帶紅色警戒經(jīng)典注釋風(fēng)格)
這篇文章主要介紹了VSCode 添加自定義注釋的方法(附帶紅色警戒經(jīng)典注釋風(fēng)格),本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-08-08
微信小程序?qū)㈨?yè)面按鈕懸浮固定在底部的實(shí)現(xiàn)代碼
這篇文章主要介紹了微信小程序?qū)㈨?yè)面按鈕懸浮固定在底部的實(shí)現(xiàn)代碼,代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-10-10
按位“異或”運(yùn)算符 (^)是對(duì)兩個(gè)表達(dá)式執(zhí)行按位異或，下面為大家介紹下其具體的使用方法2014-03-03
javascript使用appendChild追加節(jié)點(diǎn)實(shí)例
這篇文章主要介紹了javascript使用appendChild追加節(jié)點(diǎn)的方法,實(shí)例分析了appendChild()函數(shù)增加結(jié)點(diǎn)的使用技巧,需要的朋友可以參考下2015-01-01
JavaScript之移動(dòng)端H5生成圖片解決方案講解
這篇文章主要介紹了JavaScript之移動(dòng)端H5生成圖片解決方案講解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-08-08
Javascript本地存儲(chǔ)localStorage看這一篇就夠了
這篇文章主要給大家介紹了關(guān)于Javascript本地存儲(chǔ)localStorage的相關(guān)資料,localStorage會(huì)可以將第一次請(qǐng)求的數(shù)據(jù)直接存儲(chǔ)到本地,這個(gè)相當(dāng)于一個(gè)5M大小的針對(duì)于前端頁(yè)面的數(shù)據(jù)庫(kù),需要的朋友可以參考下2024-07-07
javascript實(shí)現(xiàn)的文字加密解密
javascript實(shí)現(xiàn)的文字加密解密...2007-06-06
Firefox/Chrome/Safari的中可直接使用$/$$函數(shù)進(jìn)行調(diào)試
偶然發(fā)現(xiàn)的，頁(yè)面中沒(méi)有引入Prototype和jQuery。控制臺(tái)中敲$卻發(fā)現(xiàn)是一個(gè)函數(shù)。又試著敲$$，也是個(gè)function2012-02-02