createElement動(dòng)態(tài)創(chuàng)建HTML對象腳本代碼
更新時(shí)間:2008年11月24日 20:56:47 作者:
利用createElement動(dòng)態(tài)創(chuàng)建鏈接,div等代碼
1.創(chuàng)建鏈接
復(fù)制代碼 代碼如下:
<script language="javascript">
var o = document.body;
//創(chuàng)建鏈接
function createA(url,text)
{
var a = document.createElement("a");
a.href = url;
a.innerHTML = text;
a.style.color = "red";
o.appendChild(a);
}
createA("http://chabaoo.cn/","牛C網(wǎng)");
</script>
2.創(chuàng)建DIV
復(fù)制代碼 代碼如下:
<script language="javascript">
var o = document.body;
//創(chuàng)建DIV
function createDIV(text)
{
var div = document.createElement("div");
div.innerHTML = text;
o.appendChild(div);
}
createDIV("牛C網(wǎng):http://chabaoo.cn/");
</script>
3.創(chuàng)建表單項(xiàng)
復(fù)制代碼 代碼如下:
<script language="javascript">
var o = document.body;
//創(chuàng)建表單項(xiàng)
function createInput(sType,sValue)
{
var input = document.createElement("input");
input.type = sType;
input.value = sValue;
o.appendChild(input);
}
createInput("button","ooo");
</script>
4.創(chuàng)建表格
復(fù)制代碼 代碼如下:
<script language="javascript">
var o = document.body;
//創(chuàng)建表格
function createTable(w,h,r,c)
{
var table = document.createElement("table");
var tbody = document.createElement("tbody");
table.width = w;
table.height = h;
table.border = 1;
for(var i=1;i<=r;i )
{
var tr = document.createElement("tr");
for(var j=1;j<=c;j )
{
var td = document.createElement("td");
td.innerHTML = i "" j;
//td.appendChild(document.createTextNode(i "" j));
td.style.color = "#FF0000";
tr.appendChild(td);
}
tbody.appendChild(tr);
}
table.appendChild(tbody);
o.appendChild(table);
}
createTable(270,270,9,9);
</script>
您可能感興趣的文章:
- createElement與createDocumentFragment的點(diǎn)點(diǎn)區(qū)別小結(jié)
- javascript createElement()創(chuàng)建input不能設(shè)置name屬性的解決方法
- Javascript createElement和innerHTML增加頁面元素的性能對比
- getElementByID、createElement、appendChild幾個(gè)DHTML元素
- 動(dòng)態(tài)加載js文件 document.createElement
- IE中createElement需要注意的一個(gè)問題
- document.createElement("A")比較不錯(cuò)的屬性
- document.createElement()用法
- document.createElement()用法及注意事項(xiàng)(ff下不兼容)
相關(guān)文章
bootstrapValidator 重新啟用提交按鈕的方法
bootstrapValidator 使用中,由于字段檢查等原因,致使提交按鈕失效。如何重新啟用提交按鈕呢?下面小編給大家介紹下bootstrapValidator 重新啟用提交按鈕的方法,需要的朋友可以參考下2017-02-02JavaScript實(shí)現(xiàn)煙花特效(面向?qū)ο?
這篇文章主要為大家詳細(xì)介紹了JavaScript使用面向?qū)ο缶幊虒?shí)現(xiàn)煙花特效,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08JS實(shí)現(xiàn)的點(diǎn)擊按鈕圖片上下滾動(dòng)效果示例
這篇文章主要介紹了JS實(shí)現(xiàn)的點(diǎn)擊按鈕圖片上下滾動(dòng)效果,涉及javascript事件響應(yīng)及頁面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-01-01JavaScript的內(nèi)置對象Math和字符串詳解
這篇文章主要為大家介紹了JavaScript的內(nèi)置對象Math和字符串,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助2021-11-11理解JavaScript設(shè)計(jì)模式中的建造者模式
這篇文章主要介紹了理解JavaScript設(shè)計(jì)模式中的建造者模式,文章基于JavaScript的相關(guān)資料展開箱子內(nèi)容介紹,具有一定的參考價(jià)值,需要的小伙伴可以參考一下2022-04-04Js實(shí)現(xiàn)網(wǎng)頁鍵盤控制翻頁的方法
這篇文章主要介紹了Js實(shí)現(xiàn)網(wǎng)頁鍵盤控制翻頁的方法,較為詳細(xì)的分析了Js實(shí)現(xiàn)網(wǎng)頁鍵盤控制翻頁的原理與具體實(shí)現(xiàn)方法,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2014-10-10