JS實現(xiàn)的DOM插入節(jié)點操作示例
更新時間：2018年04月04日 10:58:38 作者：chengqiuming
這篇文章主要介紹了JS實現(xiàn)的DOM插入節(jié)點操作,結(jié)合實例形式分析了javascript針對頁面dom元素動態(tài)操作相關實現(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>chabaoo.cn 插入節(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é)果
更多關于JavaScript相關內(nèi)容感興趣的讀者可查看本站專題：《JavaScript操作DOM技巧總結(jié)》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學運算用法總結(jié)》
希望本文所述對大家JavaScript程序設計有所幫助。
相關文章
JS關于for循環(huán)中使用setTimeout的四種解決方案
這篇文章主要介紹了JS關于for循環(huán)中使用setTimeout的四種解決方案，想深入了解JS的同學，一定要看下2021-05-05
這篇文章主要介紹了JS實現(xiàn)數(shù)組的增刪改查操作,結(jié)合實例形式分析了javascript針對數(shù)組的追加、獲取、刪除、添加、修改等常見操作技巧與相關注意事項,需要的朋友可以參考下2018-08-08
javascript實現(xiàn)可改變滾動方向的無縫滾動實例
無縫滾動在制作一些圖片展示的時候還是蠻有用的，下面與大家分享下javascript實現(xiàn)的可改變滾動方向的無縫滾動，具體實現(xiàn)如下，感興趣的朋友可以參考下哈2013-06-06
這篇文章主要介紹了js 壓縮圖片的示例，幫助大家利用js處理圖片，完成特殊需求，感興趣的朋友可以了解下2020-10-10
JS如何設置cookie有效期為當天24點并彈出歡迎登陸界面
這篇文章主要介紹了JS如何設置cookie有效期為當天24點并彈出歡迎登陸界面的代碼，代碼比較簡單，好理解，需要的朋友可以參考下2016-08-08
js 動態(tài)給元素添加、移除事件的實現(xiàn)方法
下面小編就為大家?guī)硪黄猨s 動態(tài)給元素添加、移除事件的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
本文講述前端項目的實戰(zhàn)中，是如何使用package.json對依賴包進行版本管理的，以及不同規(guī)則對依賴的管理會產(chǎn)生什么影響2022-07-07
BootstrapTable refresh 方法使用實例簡單介紹
本文就bootstrapTable refresh 方法如何傳遞參數(shù)做簡單舉例說明，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-02-02
這篇文章主要為大家介紹了uni-app實現(xiàn)全局水印示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07
Three.js利用orbit controls插件（軌道控制）控制模型交互動作詳解
這篇文章主要給大家介紹了關于Three.js利用orbit controls插件，也就是軌道控制來控制模型交互動作的相關資料，文中通過示例代碼介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面來一起看看吧。2017-09-09