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

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

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

本文實例講述了Javascript動態(tài)創(chuàng)建div的方法。分享給大家供大家參考。具體實現(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)建一個div

        var Ospan=document.createElement("span");          //創(chuàng)建一個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)建一個span

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

    }

</script>

</head>

<body>

</body>

</html>

希望本文所述對大家的javascript程序設計有所幫助。

您可能感興趣的文章:

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