原生jshtml tamplate生成页面元素
时间: 2024-01-13 11:03:33 浏览: 40
生成页面元素的方法有很多种,其中一种比较常用的是使用原生 JavaScript 和 HTML 模板来动态生成页面元素。以下是一个简单的示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>JSHTML Template</title>
</head>
<body>
<div id="container"></div>
<template id="item-template">
<div class="item">
<h2 class="title"></h2>
<p class="description"></p>
</div>
</template>
<script>
// 获取 template 元素
var itemTemplate = document.querySelector('#item-template');
// 创建数据
var data = [
{title: '标题1', description: '描述1'},
{title: '标题2', description: '描述2'},
{title: '标题3', description: '描述3'}
];
// 获取容器元素
var container = document.querySelector('#container');
// 循环数据,生成元素并添加到容器中
data.forEach(function(item) {
// 克隆 template 元素
var element = itemTemplate.content.cloneNode(true);
// 设置元素内容
element.querySelector('.title').textContent = item.title;
element.querySelector('.description').textContent = item.description;
// 添加元素到容器中
container.appendChild(element);
});
</script>
</body>
</html>
```
在上面的示例中,我们使用了 HTML `<template>` 元素来定义一个模板,并在 JavaScript 中动态生成了页面元素。具体的步骤如下:
1. 首先,我们在 HTML 中定义了一个空的 `<div>` 元素作为容器,并在 `<template>` 元素中定义了一个模板,其中包含了我们要生成的页面元素的结构和样式。
2. 在 JavaScript 中,我们先使用 `document.querySelector()` 方法获取到了 `<template>` 元素和容器元素。
3. 我们定义了一个数组 `data` 作为数据源,其中包含了每个页面元素的标题和描述。这个数组可以从后端 API 或本地数据源中获取。
4. 接下来,我们使用 `forEach()` 方法遍历了数组中的每个元素,并使用 `cloneNode()` 方法克隆了 `<template>` 元素。
5. 然后,我们使用 `querySelector()` 方法获取到了克隆后的元素中的标题和描述元素,并使用 `textContent` 属性将它们的文本内容设置为对应的数据。
6. 最后,我们将生成的元素添加到了容器中,完成了页面的动态生成。
需要注意的是,上面的示例仅仅是一个简单的示例,实际使用时可能需要根据具体的需求进行修改和优化。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![exe](https://img-home.csdnimg.cn/images/20210720083343.png)
![mp4](https://img-home.csdnimg.cn/images/20210720083504.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)