close

[JavaScript HTML DOM]使用document物件，使用方法document.createElement()及createTextNode()


說明：
document.createElement()
新增一個html 元件
document.createTextNode()
新增一個字串元件

此範例設計說明：
第一步、使用新增一個html元件button createElement("button")
第二步、使用新增一個字串 createTextNode("新增")
第三步、將此字串加入到button元件
第四步、將此button元件，加入到body裡，使用document.body.appendChild(元件)
程式：
<html>
<head>
<title>[JavaScript-HTML_DOM]使用document物件，使用方法document.createElement()及createTextNode()</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function myAdd() {
var button = document.createElement("button");
var text = document.createTextNode("新增");
button.appendChild(text);
document.body.appendChild(button);
}
</script>
</head>
<body>
[JavaScript-HTML_DOM]使用document物件，使用方法document.createElement()及createTextNode()<br>
<input type="button" value="新增" onclick="myAdd()"/>
</body>
</html>
圖：

 按下新增

 再按下第一個新增




相關範例：





 






 















其它文章

arrow
arrow
    文章標籤
    javascript dom createelement html 使用方法 物件 使用 新增 用法 document createtextnode appendchild
    全站熱搜

    PG Levin Li 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄