使用createElement动态创建HTML对象

2016-02-20 00:45 3 1 收藏

今天图老师小编给大家介绍下使用createElement动态创建HTML对象,平时喜欢使用createElement动态创建HTML对象的朋友赶紧收藏起来吧!记得点赞哦~

【 tulaoshi.com - Web开发 】

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)1.创建链接
script language="javascript"
var o = document.body;
//创建链接
function createA(url,text)
{
    var a = document.createElement("a");
    a.href = url;
    a.innerHTML = text;
    a.style.color = "red";
    o.appendChild(a);
}
createA("http://www.webjx.com/","网页教学网");
/script
2.创建DIV
script language="javascript"
var o = document.body;
//创建DIV
function createDIV(text)
{
    var div = document.createElement("div");
    div.innerHTML = text;
    o.appendChild(div);
}
createDIV("网页教学网:http://www.webjx.com/");
/script
3.创建表单项
script language="javascript"
var o = document.body;
//创建表单项
function createInput(sType,sValue)
{
    var input = document.createElement("input");
    input.type = sType;
    input.value = sValue;
    o.appendChild(input);
}
createInput("button","ooo");
/script
4.创建表格

script language="javascript"
var o = document.body;
//创建表格
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
注意:一定要有tbody,否则IE下不能创建表格,FF下可以!

来源:https://www.tulaoshi.com/n/20160220/1632465.html

延伸阅读
经过微软和Netscape关于浏览器大战新闻发布会以及种种传闻和无休止的辩论之后,你从新发布的这两种4.0版的浏览器中得到了什么呢? 只是一个占据了你的硬盘40-MB空间的庞大怪物?还是可以推动媒体发展的令人兴奋倍受鼓舞的充满活力的新生事物?除了一些有能力制定4.0版本规格的大型站点之外,实际上动态HTML还没有真正广泛应...
    如果你认真阅读了本教程并做了留给你的家庭作业的话,你心中肯定还存在这样一个疑问:这个动画是很有趣,但是你做的网站仍然是比较朴实无华的那种,所以动态HTML对你来说可能没有太大的价值。     没关系,今天的教程就是针对你这样的问题制作的。今天我们将建立几个用户界面元素,处理用户事...
  今天我们将开始学习动态HTML最精彩的部分:动态HTML编程。HTM之所以成功的原因之一在于它提供了在互联网上展现网页的统一方式。一旦你标识了一个网页,它在任何地方都可以看到。Javascript也是如此。及时它的版本会有很多种,但它的核心和语法是统一的,它在支持Javascript的所有浏览器中都可以应用。CSS也具有统一的语法。在...
    现在,经过四天的动态HTML教程,你已经知道如何制作动画和用户界面。你可以定位对象,在网页中移动它们,用程序改变它们的z-index和可视性。你知道如何条件化不同的DOM和写在Microsoft和Netscape的浏览器中都可用的文档。也许你觉得用手工编码太辛苦,于是你抛弃了文本编辑器,投入所见即所得的编辑工具的怀抱。 ...
在EJB 2.0局部引用和容器治理关系出现之前,通常把实体EJB用于模型粗粒度域对象。这主要是由于与远程通信有关系统开销并阻止了细粒度访问企业层的客户层对象。粗粒度设计的性能通过实现数值对象而促进改善,压缩所有的数据也就是说在客户层和企业层之间传递数据。 !-- frame contents -- !-- /frame contents -- 使用有大量域...

经验教程

56

收藏

76
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部