在js中创建元素节点添加到body中,元素节点的内容结构上是一样的,展示的数据不一样,怎么把内容结构抽出来作为模板,只关心数据的填充呢
时间: 2024-04-14 10:28:57 浏览: 18
在JavaScript中,你可以使用模板字符串和`innerHTML`属性来实现将内容结构作为模板,并仅关注数据填充的目的。
首先,你需要创建一个包含模板结构的字符串。在模板字符串中,可以使用占位符(`${}`)来标记需要填充数据的位置。例如,假设你的模板结构如下:
```html
<div class="item">
<h3>${title}</h3>
<p>${description}</p>
</div>
```
接下来,在JavaScript代码中,你可以使用模板字符串创建一个元素节点,并将其内容设置为模板结构。然后,使用占位符的键替换为实际的数据值。最后,将该元素节点添加到`body`中。
以下是一个示例代码:
```javascript
// 假设有一个包含数据的数组
var data = [
{
title: '标题1',
description: '描述1'
},
{
title: '标题2',
description: '描述2'
},
{
title: '标题3',
description: '描述3'
}
];
// 创建模板字符串
var template = `
<div class="item">
<h3>\${title}</h3>
<p>\${description}</p>
</div>
`;
// 在body中创建元素节点,并填充数据
data.forEach(function(item) {
// 创建一个临时的div元素节点
var tempDiv = document.createElement('div');
// 使用模板字符串填充数据
tempDiv.innerHTML = template.replace(/\${(.*?)}/g, function(_, key) {
return item[key];
});
// 获取填充后的元素节点
var filledElement = tempDiv.firstChild;
// 将填充后的元素节点添加到body中
document.body.appendChild(filledElement);
});
```
在这个例子中,我们使用了`replace`方法和正则表达式来替换模板字符串中的占位符。通过循环遍历数据数组,在每次迭代中创建一个临时的`div`元素节点,并将模板字符串填充数据后的内容设置为该临时节点的`innerHTML`。最后,将填充后的元素节点添加到`body`中。
这样,你就可以实现将内容结构作为模板,只关心数据填充的目的。每次使用相同的结构模板,只需要更改数据即可生成不同的内容。