当前位置：首页 > 行业动态 > 正文

js如何添加html内容

admin
行业动态
2024-04-04
3

在JavaScript中，可以使用innerHTML属性来添加HTML内容，以下是一个简单的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="content"></div>
    <script>
        // 获取要插入内容的div元素
        var contentDiv = document.getElementById("content");
        // 创建一个新的HTML字符串
        var htmlString = "<h1>这是一个标题</h1>";
        htmlString += "<table border='1'>";
        htmlString += "<tr><th>姓名</th><th>年龄</th></tr>";
        htmlString += "<tr><td>张三</td><td>25</td></tr>";
        htmlString += "<tr><td>李四</td><td>30</td></tr>";
        htmlString += "</table>";
        // 将HTML字符串添加到div元素中
        contentDiv.innerHTML = htmlString;
    </script>
</body>
</html>

在这个示例中，我们首先通过getElementById方法获取了一个名为content的div元素，我们创建了一个新的HTML字符串，其中包含了一个小标题和一个表格，我们使用innerHTML属性将这个HTML字符串添加到了div元素中。