快捷導航

javascript與jquery動態(tài)創(chuàng)建html元素示例

更新時間：2016年07月25日 14:53:23 作者：ajunfly

這篇文章主要介紹了javascript與jquery動態(tài)創(chuàng)建html元素的方法,結(jié)合實例形式分析了javascript與jQuery動態(tài)創(chuàng)建頁面元素的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下

本文實例講述了javascript與jquery動態(tài)創(chuàng)建html元素的方法。分享給大家供大家參考，具體如下：

1.javascript創(chuàng)建元素

創(chuàng)建select

var select = document.createElement("select");
elect.options[0] = new Option("加載項1", "value1");
select.options[1] = new Option("加載項2", "value2");
select.size = "2";
testDiv.appendChild(select);

創(chuàng)建div

var openDiv = document.createElement("div");
openDiv.id = "div3D";
openDiv.style.width = w+"px";
openDiv.style.height = h+"px";
openDiv.innerHTML = strHtml;
document.body.appendChild(openDiv);

2.jquery創(chuàng)建元素

function CreateDom() {
   var select = $("<select/>").appendTo($("body"));
   var option1 = $("<option value=\"1\">text1</option>").appendTo(select);
   var option2 = $("<option value=\"2\">text2</option>").appendTo(select);
   var option3 = $("<option value=\"3\">text3</option>").appendTo(select);
   var text = $("<input type=\"text\">").css({ "width": "150px", "border": "1px lightgrey solid" }).appendTo($("body"));
   var checkbox = $("<input type=\"checkbox\" />").appendTo($("body"));
   var ul = $("<ul/>").appendTo($("body"));
   var li = $("<li>li1</li>").appendTo(ul);
   var li = $("<li>li2</li>").appendTo(ul);
}

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學運算用法總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

您可能感興趣的文章:

相關(guān)文章

JS實現(xiàn)點擊鏈接取消跳轉(zhuǎn)效果的方法
有時候我們僅僅希望將鏈接<a>作為一個按鈕使用，但是在默認狀態(tài)下，點擊鏈接會出現(xiàn)跳轉(zhuǎn)效果，下面就通過代碼實例，介紹一下如何實現(xiàn)此效果
2014-01-01
關(guān)鍵字空格替換為逗號的js代碼
這個功能主要是方便我們在發(fā)布文章時填寫關(guān)鍵字的時候，不用切換為英文狀態(tài)輸入逗號，他可以將中文逗號和空格統(tǒng)一轉(zhuǎn)換為英文逗號，提高工作效率。
2008-11-11
JS 文件傳參及處理技巧分析
其實為js文件傳參是很久就接觸過的一個問題，只是一直沒有放在心上，今天在無憂看到又有人問這個問題，今日總結(jié)一下。
2010-05-05
Jquery中刪除元素的實現(xiàn)代碼
empty用來刪除指定元素的子元素，remove用來刪除元素，或者設(shè)定細化條件執(zhí)行刪除
2011-12-12
JavaScript 中的 `forEach` 無法退出循環(huán)的解決方案
在 JavaScript 中,forEach 是一個數(shù)組方法,它用來對數(shù)組中的每個元素執(zhí)行指定的回調(diào)函數(shù),為了更好地理解這個問題,本文將通過實際項目代碼示例,并結(jié)合詳細的目錄結(jié)構(gòu)來進行講解,感興趣的朋友跟隨小編一起看看吧
2024-12-12
JS監(jiān)聽微信、支付寶等移動app及瀏覽器的返回、后退、上一頁按鈕的事件方法
這篇文章主要介紹了JS監(jiān)聽微信、支付寶等移動app及瀏覽器的返回、后退、上一頁按鈕的事件方法,需要的朋友可以參考下
2016-08-08
JavaScript中的值是按值傳遞還是按引用傳遞問題探討
這篇文章主要介紹了JavaScript中的值是按值傳遞還是按引用傳遞問題探討,本文講解了按值傳遞、按引用傳遞、按共享傳遞、基本類型的不可變(immutable)性質(zhì)等內(nèi)容,需要的朋友可以參考下
2015-01-01
實現(xiàn)web打印的各種方法介紹及實現(xiàn)代碼
web的打印方法具我自己懂得知道的有：JQuery插件Jqprint實現(xiàn);JQery打印插件PrintArea實現(xiàn)網(wǎng)頁打印;CSS控制網(wǎng)頁打印樣式,本文詳細介紹實現(xiàn)步驟，感興趣的朋友可以了解下
2013-01-01
JavaScript時間與時間戳的轉(zhuǎn)換操作實例分析
這篇文章主要介紹了JavaScript時間與時間戳的轉(zhuǎn)換操作,結(jié)合實例形式分析了javascript日期與時間戳轉(zhuǎn)換相關(guān)函數(shù)與操作技巧,需要的朋友可以參考下
2018-12-12
Javascript中的this綁定介紹
在Javascript里，函數(shù)被調(diào)用的時候，除了接受聲明是定義的形式參數(shù)，每一個函數(shù)還接受兩個附加的參數(shù)：this和arguments。
2011-09-09