程式語言教學誌 FB, YouTube: PYDOING: HTML DOM 快速導覽 - 元素物件 Node 的方法 appendChild()

Node.appendChild() 替元素 (element) 物件 (object) 附加子代 (child) 元素。

appendChild() 需要一個參數

Node.appendChild(child);

child 為另一個元素物件。

舉例如下

function run() {
    var s = document.createElement("div");
    s.innerHTML = "There is no spoon.";
    var demo = document.getElementById("demo");
    demo.appendChild(s);
}

/* 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名：document050.js
     功能：示範 JavaScript 程式 
     作者：張凱慶
     時間：西元 2011 年 8 月 */

此例先建立 <div> 元素物件的變數 (variable) s ，然後將 s 的內容設定為 There is no spoon.

var s = document.createElement("div");
s.innerHTML = "There is no spoon.";

然後用變數 demo 取得網頁中 id 屬性為 demo 的元素，再將 s 附加到 demo 之中

var demo = document.getElementById("demo");
demo.appendChild(s);

我們以下面的 HTML 文件載入

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM DEMO</title>
<script src="document050.js" type="text/javascript"></script> 
</head>
<body>

<div id="demo"></div>
</body>
</html>

<!-- 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名：document050.html
     功能：示範 JavaScript 程式 
     作者：張凱慶
     時間：西元 2011 年 8 月 -->

瀏覽器 (broswer) 開啟，按下 RUN 後如下結果

中英文術語對照
元素	element
物件	object
子代	child
變數	variable
瀏覽器	broswer

您可以繼續參考

元素物件 element

屬性

Node.baseURI

Node.childNodes

Node.firstChild

Node.lastChild

Node.nextSibling

Node.nodeName

Node.nodeType

Node.parentNode

Node.previousSibling

Node.textContent

element.childElementCount

element.children

element.classList

element.className

element.clientHeight

element.clientLeft

element.clientTop

element.clientWidth

element.firstElementChild

element.id

element.innerHTML

element.lastElementChild

element.name

element.nextElementSibling

element.offsetHeight

element.offsetLeft

element.offsetParent

element.offsetTop

element.offsetWidth

element.previousElementSibling

element.scrollHeight

element.scrollLeft

element.scrollTop

element.scrollWidth

element.style

element.title

方法

element.addEventLisener(t_str, f, b)

Node.appendChild(c)

Node.cloneNode(b)

Node.hasAttributes()

Node.hasChildNodes()

Node.insertBefore(n, r)

Node.isEqualNode(a)

Node.isSameNode()

Node.removeChild(c)

Node.replaceChild(c)

element.getAttribute(n)

element.getAttributeNode(n)

element.getElementsByTagName(n)

element.hasAttribute(n)

element.removeAttribute(n)

element.setAttribute(n, v)