快捷導(dǎo)航

Javascript動(dòng)態(tài)創(chuàng)建div的方法

更新時(shí)間：2015年02月09日 10:04:38 作者：ZEAL

這篇文章主要介紹了Javascript動(dòng)態(tài)創(chuàng)建div的方法,是javascript節(jié)點(diǎn)操作的典型應(yīng)用,非常具有實(shí)用價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了Javascript動(dòng)態(tài)創(chuàng)建div的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>原生javascript創(chuàng)建div</title>

<script>

window.onload=function () {

        var Odiv=document.createElement("div");             //創(chuàng)建一個(gè)div

        var Ospan=document.createElement("span");          //創(chuàng)建一個(gè)span

        Odiv.style.cssText="width:200px;height:200px;background:#636363;

        text-align:center;line-height:220px";    //創(chuàng)建div的css樣式

        //Odiv.id="box";                            //創(chuàng)建div的id為box

        //Odiv.className="Box";                    //div的class為Box

        Odiv.appendChild(Ospan);            //在div內(nèi)創(chuàng)建一個(gè)span

        document.body.appendChild(Odiv);        //在body內(nèi)創(chuàng)建一個(gè)div 

    }

</script>

</head>

<body>

</body>

</html>

希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

SyntaxHighlighter自動(dòng)識(shí)別并加載腳本語(yǔ)言
SyntaxHighlighter是一個(gè)使用JavaScript編寫的支持多種編程語(yǔ)言語(yǔ)法高亮的JS插件，很多大型網(wǎng)站或博客都在使用?，F(xiàn)在給大家介紹一下如何讓它自動(dòng)識(shí)別加載我們添加的代碼語(yǔ)言
2017-02-02
淺談JavaScript 中的延遲加載屬性模式
改善性能的最好方法之一是避免重復(fù)兩次相同的工作。因此，只要可以緩存結(jié)果供以后使用，就可以加快程序的速度。延遲加載屬性模式技術(shù)使任何屬性都可以成為緩存層以提高性能。這里說(shuō)到的延遲加載屬性模式就是利用的訪問器屬性，將計(jì)算昂貴的操作推遲到需要時(shí)再使用
2021-06-06
JavaScript自定義分頁(yè)樣式
這篇文章主要為大家詳細(xì)介紹了JavaScript自定義分頁(yè)樣式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-01-01
JS中如何使用 filter() 方法過濾數(shù)組元素
filter()方法是JavaScript中用于過濾數(shù)組元素的常用方法,它接受一個(gè)回調(diào)函數(shù)作為參數(shù),返回一個(gè)新數(shù)組,本文總結(jié)了使用filter()方法的最佳實(shí)踐,感興趣的朋友一起看看吧
2025-01-01
使用javascript實(shí)現(xiàn)有效時(shí)間的控制,并顯示將要過期的時(shí)間
本篇文章主要介紹了使用javascript實(shí)現(xiàn)有效時(shí)間的控制,并顯示將要過期的時(shí)間示例代碼。需要的朋友可以過來(lái)參考下，希望對(duì)大家有所幫助
2014-01-01
JavaScript使用canvas實(shí)現(xiàn)錨點(diǎn)摳圖功能
在日常的圖片處理中,我們經(jīng)常會(huì)遇到需要摳圖的情況,無(wú)論是為了美化照片、制作海報(bào),還是進(jìn)行圖片合成,摳圖對(duì)于我們來(lái)說(shuō)也是一種很常用的功能了,今天就讓我們一起來(lái)看下怎么使用canvas來(lái)實(shí)現(xiàn)一個(gè)錨點(diǎn)摳圖功能
2024-03-03
js中cookie的添加、取值、刪除示例代碼
cookie的應(yīng)用在網(wǎng)頁(yè)中很常見，在本文為大家介紹下js中如何對(duì)cookie進(jìn)行添加、取值、刪除，感興趣的朋友不要錯(cuò)過
2013-10-10
javascript實(shí)現(xiàn)打磚塊小游戲(附完整源碼)
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)打磚塊小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-09-09
javascript下載文件5種方式實(shí)例詳解
在Web開發(fā)中文件下載功能是一個(gè)非常常見的功能,這篇文章主要給大家介紹了關(guān)于javascript下載文件5種方式的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-11-11
js中數(shù)組常用方法總結(jié)（推薦）
這篇文章主要介紹了js中數(shù)組常用方法總結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04