JS實現(xiàn)的DOM插入節(jié)點操作示例
更新時間：2018年04月04日 10:58:38 作者：chengqiuming
這篇文章主要介紹了JS實現(xiàn)的DOM插入節(jié)點操作,結(jié)合實例形式分析了javascript針對頁面dom元素動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下
本文實例講述了JS實現(xiàn)的DOM插入節(jié)點操作。分享給大家供大家參考，具體如下：
一 介紹
插入節(jié)點通過使用insertBefore()方法來實現(xiàn)。
insertBefore()方法將在另一個子節(jié)點前插入新的子節(jié)點。
obj.insertBefore(new,ref)
new：表示新的子節(jié)點。
ref：指定一個節(jié)點，在這個節(jié)點前插入新的節(jié)點。
二 應用
插入節(jié)點，本示例在頁面的文本框中輸入需要插入的文本，然后通過單擊“前插入”按鈕將文本插入到頁面中。
三 完整示例代碼：
<!DOCTYPE html>
<html>
<head>
<title>www.fzitv.net 插入節(jié)點</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é)點
node.parentNode.insertBefore(newNode,node);
}
-->
</script>
</head>
<body>
<h2 id="h">在上面插入節(jié)點</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>
四 運行結(jié)果
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript操作DOM技巧總結(jié)》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學運算用法總結(jié)》
希望本文所述對大家JavaScript程序設計有所幫助。
相關(guān)文章
跟我學習javascript的Date對象，文章主要介紹了Date 日期和時間對象的操作，文章末尾為大家附加了兩個案例，幫助大家更好的學習javascript的Date對象，對這方面感興趣的小伙伴們可以參考一下2015-11-11
下面小編就為大家?guī)硪黄獪\談js的異步執(zhí)行。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
VSCode 添加自定義注釋的方法(附帶紅色警戒經(jīng)典注釋風格)
這篇文章主要介紹了VSCode 添加自定義注釋的方法(附帶紅色警戒經(jīng)典注釋風格),本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-08-08
微信小程序?qū)㈨撁姘粹o懸浮固定在底部的實現(xiàn)代碼
這篇文章主要介紹了微信小程序?qū)㈨撁姘粹o懸浮固定在底部的實現(xiàn)代碼,代碼簡單易懂，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-10-10
按位“異或”運算符 (^)是對兩個表達式執(zhí)行按位異或，下面為大家介紹下其具體的使用方法2014-03-03
javascript使用appendChild追加節(jié)點實例
這篇文章主要介紹了javascript使用appendChild追加節(jié)點的方法,實例分析了appendChild()函數(shù)增加結(jié)點的使用技巧,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了JavaScript之移動端H5生成圖片解決方案講解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下2021-08-08
Javascript本地存儲localStorage看這一篇就夠了
這篇文章主要給大家介紹了關(guān)于Javascript本地存儲localStorage的相關(guān)資料,localStorage會可以將第一次請求的數(shù)據(jù)直接存儲到本地,這個相當于一個5M大小的針對于前端頁面的數(shù)據(jù)庫,需要的朋友可以參考下2024-07-07
javascript實現(xiàn)的文字加密解密...2007-06-06
Firefox/Chrome/Safari的中可直接使用$/$$函數(shù)進行調(diào)試
偶然發(fā)現(xiàn)的，頁面中沒有引入Prototype和jQuery?？刂婆_中敲$卻發(fā)現(xiàn)是一個函數(shù)。又試著敲$$，也是個function2012-02-02