动态生成HTML标签

本文介绍如何使用JavaScript动态创建HTML元素,包括段落和表格,并将其添加到指定的div容器中。通过具体的代码示例展示了如何利用`document.createElement`和`appendChild`等方法实现这一过程。

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

 
<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    
<title>无标题页</title>
    
<script>
    
function onload()
    
{
        
var k=document.getElementById("div1");
        
var t=document.createElement("p");
        t.appendChild(document.createTextNode(
"This is a new paragraph with "));
     
        k.appendChild(t);
    }

    
    
function onload1()
    
{
        
var k=document.getElementById("div1");
        
var t1=document.createElement("tbody");//用tr来appendChild(td),然后再用tbody来appendChild(tr),然后再用table来appendChild(tbody)就动态生成了一个table了。
        var t=document.createElement("table");
        
var tr=document.createElement("tr");
        
var td=document.createElement("td");
        
    
        
        td.appendChild(document.createTextNode(
"This is a new colum of zhe table!"));
        tr.appendChild(td);
        t1.appendChild(tr);
        t.appendChild(t1);
        k.appendChild(t); 
        
        alert(t.innerHTML);
//innerHTML是用来显示内部标签。
        
        
    }

    
</script>
</head>
<body onload="onload1()">
    
<form id="form1" runat="server">
    
<div id="div1">

    
</div>
    
</form>
</body>
</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值