欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS實(shí)現(xiàn)的DOM插入節(jié)點(diǎn)操作示例

 更新時(shí)間：2018年04月04日 10:58:38   作者：chengqiuming  
這篇文章主要介紹了JS實(shí)現(xiàn)的DOM插入節(jié)點(diǎn)操作,結(jié)合實(shí)例形式分析了javascript針對(duì)頁(yè)面dom元素動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下

本文實(shí)例講述了JS實(shí)現(xiàn)的DOM插入節(jié)點(diǎn)操作。分享給大家供大家參考，具體如下：

一 介紹

插入節(jié)點(diǎn)通過使用insertBefore()方法來實(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è)面的文本框中輸入需要插入的文本，然后通過單擊“前插入”按鈕將文本插入到頁(yè)面中。

三 完整示例代碼：

<!DOCTYPE html>
<html>
<head>
<title>www.dbjr.com.cn 插入節(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)容感興趣的讀者可查看本站專題：《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)文章

最新評(píng)論