在HTML5页面使用js DOM动态生成HTML内容
时间: 2023-11-14 14:06:08 浏览: 40
可以使用JavaScript的DOM(文档对象模型)来动态生成HTML内容。具体而言,可以通过JavaScript代码创建新的HTML元素,并将它们添加到现有的HTML文档中。以下是一个简单的示例,演示如何使用DOM动态生成HTML内容:
```html
<!DOCTYPE html>
<html>
<head>
<title>动态生成HTML内容示例</title>
</head>
<body>
<h1 id="title"></h1>
<p id="content"></p>
<script>
var title = "动态生成HTML内容";
var content = "这是一个使用JavaScript DOM动态生成HTML内容的示例。";
// 创建新的HTML元素
var titleElement = document.createElement("h1");
var contentElement = document.createElement("p");
// 设置元素属性和内容
titleElement.setAttribute("id", "title");
titleElement.innerHTML = title;
contentElement.setAttribute("id", "content");
contentElement.innerHTML = content;
// 将元素添加到现有的HTML文档中
document.body.appendChild(titleElement);
document.body.appendChild(contentElement);
</script>
</body>
</html>
```
在这个例子中,我们首先在HTML页面中定义了两个`<h1>`和`<p>`标签,分别用于显示标题和内容。然后,在JavaScript代码中,我们定义了两个变量`title`和`content`,用于存储标题和内容的文本。接下来,我们使用`document.createElement()`方法创建了两个新的HTML元素`titleElement`和`contentElement`。然后,我们使用`setAttribute()`方法设置了元素的属性`id`,并使用`innerHTML`属性设置了元素的内容。最后,我们使用`appendChild()`方法将新元素添加到现有的HTML文档中。运行该代码后,将动态生成一个带有标题和内容的HTML页面。