快捷導(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)文章

js Function類(lèi)型
函數(shù)就是對(duì)象，而函數(shù)名是指向函數(shù)對(duì)象的指針，不會(huì)與某個(gè)函數(shù)綁定
2011-12-12
HTML中setCapture、releaseCapture 使用方法淺析
本文給大家簡(jiǎn)單介紹了下html中的高級(jí)拖動(dòng)技術(shù)setCapture、releaseCapture的使用方法，有需要的小伙伴可以參考下
2016-09-09
ion content 滾動(dòng)到底部會(huì)遮住一部分視圖的快速解決方法
本文給大家?guī)?lái)了ion content 滾動(dòng)到底部會(huì)遮住一部分視圖的快速解決方法，其實(shí)解決方法超簡(jiǎn)單的，只要在你的controller里面預(yù)先注入$ionicScrollDelegate就可以了，感興趣的朋友通過(guò)本文一起學(xué)習(xí)吧
2016-09-09
Bootstrap Metronic完全響應(yīng)式管理模板學(xué)習(xí)筆記
這篇文章主要為大家分享了Bootstrap Metronic完全響應(yīng)式管理模板學(xué)習(xí)筆記，感興趣的小伙伴們可以參考一下
2016-07-07
JS代碼優(yōu)化技巧之通俗版(減少js體積)
如果你問(wèn)我網(wǎng)站中最影響網(wǎng)站打開(kāi)速度的是什么？我會(huì)告訴是網(wǎng)站中的javascript，簡(jiǎn)稱(chēng)JS。模板中引用的JS文件越多，打開(kāi)速度越慢，這點(diǎn)我深有體會(huì)，不信你看看盧松松博客首頁(yè)，使勁優(yōu)化后依然有100K的文件
2011-12-12
用cookies實(shí)現(xiàn)的可記憶的樣式切換效果代碼下載
比較不錯(cuò)的用cookies實(shí)現(xiàn)的可記憶的樣式切換效果，這個(gè)思路也在一定程序，方便客戶(hù)的長(zhǎng)期使用。
2007-12-12
原生JS實(shí)現(xiàn)的簡(jiǎn)單小鐘表功能示例
這篇文章主要介紹了原生JS實(shí)現(xiàn)的簡(jiǎn)單小鐘表功能,涉及javascript結(jié)合定時(shí)器的數(shù)值運(yùn)算與頁(yè)面元素屬性動(dòng)態(tài)修改相關(guān)操作技巧,需要的朋友可以參考下
2018-08-08
JavaScript中的排序算法代碼
排序算法的理解算是程序員的基本功之一了，其功能是對(duì)一個(gè)數(shù)據(jù)元素集合或序列重新排列成一個(gè)按數(shù)據(jù)元素某個(gè)項(xiàng)值有序的序列。
2011-02-02
微信小程序與h5的相互跳轉(zhuǎn)場(chǎng)景分析
這篇文章主要介紹了微信小程序與h5的相互跳轉(zhuǎn)場(chǎng)景分析,在微信小程序內(nèi)編寫(xiě)webview文件,通過(guò)webview去跳轉(zhuǎn)h5,loadUrl為h5的地址,非嵌套,h5需要跳轉(zhuǎn)打開(kāi)某個(gè)微信小程序,需要的朋友可以參考下
2023-10-10
微信小程序HTTP接口請(qǐng)求封裝的實(shí)現(xiàn)
這篇文章主要介紹了微信小程序HTTP接口請(qǐng)求封裝的實(shí)現(xiàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-02-02