JS實現(xiàn)DOM節(jié)點插入操作之子節(jié)點與兄弟節(jié)點插入操作示例
更新時間：2018年07月30日 11:57:33 作者：時光不顧
這篇文章主要介紹了JS實現(xiàn)DOM節(jié)點插入操作之子節(jié)點與兄弟節(jié)點插入操作,涉及JavaScript節(jié)點的創(chuàng)建、添加簡單操作技巧,需要的朋友可以參考下
本文實例講述了JS實現(xiàn)DOM節(jié)點插入操作之子節(jié)點與兄弟節(jié)點插入操作。分享給大家供大家參考，具體如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>m.fzitv.net JS節(jié)點插入</title>
<script>
function showinsert(){ //添加子節(jié)點
var str=document.getElementById("mydiv");
var zif="段落五";
var obj=document.createElement("p"); //添加哪類節(jié)點
var objNode=document.createTextNode(zif); //創(chuàng)建文字節(jié)點
str.appendChild(obj);
obj.appendChild(objNode);
}
function showesideinsert(){ //添加兄弟節(jié)點
var str=document.getElementById("mydiv");
var zi="添加段落";
var strBrother=str.children[1];
var strNode=document.createElement("p");
var strTextNode=document.createTextNode(zi);
str.insertBefore(strNode,strBrother);
strNode.appendChild(strTextNode);
}
</script>
</head>
<body>
<div id="mydiv">
<p onClick="showinsert()">段落一
<p onClick="showesideinsert()">段落二
<p>段落三
<p>段落四
</div>
</body>
</html>
使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試運行效果如下：
更多關(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程序設(shè)計有所幫助。
相關(guān)文章
這篇文章主要介紹了js實現(xiàn)的tab標簽切換效果，功能非常簡單，實現(xiàn)了點擊切換的效果，推薦給大家，有需要的小伙伴可以參考下。2015-09-09
這篇文章主要介紹了從零開始用electron手擼一個截屏工具的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
本文主要介紹了js實現(xiàn)鼠標左右移動，圖片也跟著移動效果的方法與思路。具有很好的參考價值，下面跟著小編一起來看下吧2017-01-01
這篇文章主要介紹了bootstrap-table后端分頁功能,結(jié)合完整實例形式分析了bootstrap-table后端請求、數(shù)據(jù)分頁功能具體步驟與實現(xiàn)技巧,需要的朋友可以參考下2020-06-06
js傳各種類型參數(shù)到Controller層的整理方式
這篇文章主要介紹了js傳各種類型參數(shù)到Controller層的整理方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
一般來說中文亂碼用js結(jié)合escape來解決，但下面的方法是一般后臺中的一些問題，需要注意下輸出順序，先聲明編碼類型在輸出內(nèi)容是個好習慣。2009-12-12
Juicer 是一個高效、輕量的前端 (Javascript) 模板引擎，使用 Juicer 可以是你的代碼實現(xiàn)數(shù)據(jù)和視圖模型的分離(MVC)。2014-06-06
這篇文章主要介紹了JS實現(xiàn)的簡潔縱向滑動菜單(滑動門)效果,通過簡單的頁面元素遍歷實現(xiàn)華東切換的功能,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
這篇文章主要介紹了JavaScript事件用法,較為詳細的分析了javascript事件流、事件類型及事件操作技巧,需要的朋友可以參考下2016-10-10
js調(diào)用webservice中的方法實現(xiàn)思路及代碼
js調(diào)用webservice還算是一個比較實用的功能,本文提供了實現(xiàn)思路及代碼，感興趣的你可不要錯過了哈，希望本文可以幫助到你啊2013-02-02