快捷導(dǎo)航

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

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

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

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

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

創(chuàng)建select

var select = document.createElement("select");
elect.options[0] = new Option("加載項(xiàng)1", "value1");
select.options[1] = new Option("加載項(xiàng)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動(dòng)畫(huà)特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

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

您可能感興趣的文章:

相關(guān)文章

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