javascript---使用createElement动态创建HTML对象

最新推荐文章于 2024-12-26 16:56:24 发布

faunjoe

最新推荐文章于 2024-12-26 16:56:24 发布

阅读量600

点赞数

CC 4.0 BY-SA版权

分类专栏： javascrip 文章标签： html javascript function input table div

本文链接：https://blog.youkuaiyun.com/faunjoe/article/details/4547098

javascrip 专栏收录该内容

120 篇文章

订阅专栏

本文通过JavaScript展示了如何动态地创建网页元素，包括链接、按钮、表格等，并提供了具体实现方法，有助于理解DOM操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<BODY>
<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.baidu.con/","cssrain.cn");
</script>
</BODY>

<body>
<script language="javascript">
var o = document.body;
//创建DIV
function createDIV(text)
{
    var div = document.createElement("div");
    div.innerHTML = text;
    div.style.background = "red";
    o.appendChild(div);
}
createDIV("Blog： http://www.baidu.com/");
</script>
</body>

<body>
<script language="javascript">
var o = document.body;
//创建DIV
function createDIV(text)
{
    var div = document.createElement("div");
    div.innerHTML = text;
div.style.background = "red";
    o.appendChild(div);
}
createDIV("Blog： http://www.baidu.com/");
</script>
</body>

<BODY>
<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","cssrain");
</script>
</BODY>

<BODY>
<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>
</BODY>