方法一頁 | 二頁 | 三頁 | 四頁 | 五頁 | 六頁 | 七頁 | 八頁
操控器一頁 | 二頁 | 成員表
在元素的子元素結清單之尾端，加上一個新元素結。其語法是：
新元素物件 = 父元素物件.appendChild( 子元素結 );
子元素結也是元素物件，可以用 createElement() 產生。如果子元素結已經存在文件中，則舊的會被刪除，移動到新的位置。
- 程式用法：
<script type='text/javascript'>
function appendChildDM()
{
var so = document.createElement('span');
so.innerHTML='<i>您好！</i>';
so.style.color='red';
alert( document.getElementById('apch').appendChild(so) );
}
function appendChild2DM()
{
var fo = document.getElementById('apch');
var so = document.getElementById('jolin');
fo.appendChild(so);
}
</script>
<span style='color:red' id='jolin'>
蔡依林</span>
<div id='apch'>
<a href='javascript:appendChildDM()'>
點此加入新元素</a><br />
<a href='javascript:appendChild2DM()'>
點此移動元素</a>
</div> - 執行結果：
蔡依林
複製元素。其語法是：
複製的元素物件 = 被複製的元素物件.cloneNode( tree );
tree 設為 true，則整個樹枝結構會被複製。設為 false，則不會複製子元素結，包括文字內容；這時你得到的是一個空的元素物件，必須自行加上內容。
- 程式用法：
<script type='text/javascript'>
function cloneNodeDM()
{
var go=document.getElementById('game');
var cp=go.cloneNode( false );
cp.innerHTML='我是複製人';
document.getElementById('cpn').appendChild(cp);
}
</script>
<span id='game' style='color:red'>
好玩遊戲<i>小遊戲</i></span>
<div id='cpn'>
<a href='javascript:cloneNodeDM()'>
點此複製元素</a>
</div> - 執行結果：
好玩遊戲小遊戲
將新元素加入子元素之前。回傳新元素物件。其語法是：
父元素物件.insertBefore(新元素物件, 子元素物件)
- 程式用法：
<script type='text/javascript'>
function insertBeforeDM()
{
var go=document.getElementById('game');
var cp=go.cloneNode( true );
var fo=document.getElementById('insb')
var so=document.getElementById('son')
alert( fo.insertBefore(cp, so) );
}
</script>
<div id='insb'>
<a id='son' href='javascript:insertBeforeDM()'>
點此加入元素</a>
</div> - 執行結果：
自父元素移除子元素，回傳移除的元素物件。如果子物件不屬於父物件，則會產生錯誤。其語法是：
父元素物件.removeChild( 子元素物件 )
- 程式用法：
<script type='text/javascript'>
function removeChildDM()
{
var fo=document.getElementById('rmf')
var so=document.getElementById('rmson')
alert( fo.removeChild( so ) );
}
</script>
<div id='rmf'>
<a id='rmson' href='javascript:removeChildDM()'>
點此移除元素</a>
</div> - 執行結果：
自父元素移除舊元素，代以新元素；回傳舊元素物件。如果舊元素不屬於父元素，則會產生錯誤。其語法是：
父元素物件.replaceChild(新元素, 舊元素);
- 程式用法：
<script type='text/javascript'>
function replaceChildDM()
{
var fo=document.getElementById('rpf')
var no=document.getElementById('wu')
var so=document.getElementById('rpson')
alert( fo.replaceChild( no, so ) );
}
</script>
<span id='wu' style='color:red'>吳宗憲</span>笑匠
<div id='rpf'>
<a id='rpson' href='javascript:replaceChildDM()'>
點此替換元素</a>
</div> - 執行結果：
吳宗憲笑匠
