javascript元素動(dòng)態(tài)創(chuàng)建實(shí)現(xiàn)方法
更新時(shí)間：2015年05月13日 11:47:09 作者：永遠(yuǎn)愛(ài)好寫(xiě)程序
這篇文章主要介紹了javascript元素動(dòng)態(tài)創(chuàng)建實(shí)現(xiàn)方法,涉及javascript操作元素的相關(guān)技巧,需要的朋友可以參考下
本文實(shí)例講述了javascript元素動(dòng)態(tài)創(chuàng)建實(shí)現(xiàn)方法。分享給大家供大家參考。具體分析如下：
document.write只能在頁(yè)面加載過(guò)程中才能動(dòng)態(tài)創(chuàng)建
可以調(diào)用document的createElement方法來(lái)創(chuàng)建具有指定標(biāo)簽的DOM對(duì)象,然后通過(guò)調(diào)用元素的appendChild方法將
新創(chuàng)建元素添加到相應(yīng)的元素下
舉例如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dom動(dòng)態(tài)創(chuàng)建元素</title>
<script type="text/javascript">
function CreateButton() {
var div = document.getElementById("divMain");
var myButton = document.createElement("input");
myButton.type = "button";
myButton.value = "我是動(dòng)態(tài)添加的";
//myButton.id="btn"; 注意:如果設(shè)置id的話(huà)要避免重復(fù)
div.appendChild(myButton); //添加到div上
}
</script>
</head>
<body>
<div id="divMain"></div>
<input type="button" value="添加元素" onclick="CreateButton()" />
</body>
</html>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
相關(guān)文章
解決layer圖標(biāo)icon不加載的問(wèn)題
今天小編就為大家分享一篇解決layer圖標(biāo)icon不加載的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
JS高仿拋物線加入購(gòu)物車(chē)特效實(shí)現(xiàn)代碼
本篇文章主要介紹了JS高仿拋物線加入購(gòu)物車(chē)特效實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-02-02
JS手搓P(guān)romise的常見(jiàn)方法總結(jié)
這篇文章主要為大家詳細(xì)介紹了JavaScript中手寫(xiě)Promise的一些常見(jiàn)方法,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,需要的可以參考一下2023-09-09
uniapp開(kāi)發(fā)小程序?qū)崿F(xiàn)滑動(dòng)頁(yè)面控制元素的顯示和隱藏效果
這篇文章主要介紹了uniapp開(kāi)發(fā)小程序?qū)崿F(xiàn)滑動(dòng)頁(yè)面控制元素的顯示和隱藏效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-12-12
本文給大家介紹的是javascript中的靜態(tài)屬性和原型屬性，并附上示例分析，十分的實(shí)用，有需要的小伙伴可以參考下。2015-05-05
javascript下查找父節(jié)點(diǎn)的簡(jiǎn)單方法
javascript下查找父節(jié)點(diǎn)的簡(jiǎn)單方法...2007-08-08
Django模板繼承 extend標(biāo)簽實(shí)例代碼詳解
這篇文章主要介紹了Django模板繼承 extend標(biāo)簽實(shí)例代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-05-05
JavaScript實(shí)現(xiàn)圖像壓縮的方法
使用 JavaScript 和 canvas 壓縮圖像可以使用 canvas 的 drawImage() 方法將圖像繪制到 canvas 上，然后使用 toDataURL() 方法將圖像轉(zhuǎn)換為 Data URL 形式，這篇文章主要介紹了JavaScript 圖像壓縮的相關(guān)資料,需要的朋友可以參考下2023-01-01
JavaScript 拖拽實(shí)現(xiàn)（附注釋?zhuān)?，最?jīng)典簡(jiǎn)單短小精悍！
JavaScript拖拽實(shí)現(xiàn)（附注釋?zhuān)?，最?jīng)典！最簡(jiǎn)單！短小精悍！2009-04-04
Typescript中的數(shù)據(jù)類(lèi)型實(shí)例總結(jié)
ts中數(shù)據(jù)類(lèi)型的定義是重點(diǎn)之一,所以必須明確ts有哪些數(shù)據(jù)類(lèi)型,下面這篇文章主要給大家介紹了關(guān)于Typescript中數(shù)據(jù)類(lèi)型的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-03-03