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 的頭像
    PG Levin Li

    程式開發學習之路

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

    E-mail轉寄