Javascript 有没有办法复制元素以防止HTML中的重复代码？_Javascript_Html_Css

Javascript 有没有办法复制元素以防止HTML中的重复代码？

javascript html css

Javascript 有没有办法复制元素以防止HTML中的重复代码？,javascript,html,css,Javascript,Html,Css,很抱歉，这可能是一个愚蠢的问题，但我正在写一个餐厅菜单页面，并希望创建一种方式，在页面上以网格状（3x5）模式显示多个食物项目/描述，而无需手动为每个项目编码15个几乎相同的div 任何帮助或解决方案都将是惊人的 <div class="menu-column-wrapper"> <div class="menu-column"> <div class="men

很抱歉，这可能是一个愚蠢的问题，但我正在写一个餐厅菜单页面，并希望创建一种方式，在页面上以网格状（3x5）模式显示多个食物项目/描述，而无需手动为每个项目编码15个几乎相同的div

任何帮助或解决方案都将是惊人的

<div class="menu-column-wrapper">
            <div class="menu-column">
                <div class="menu-item">
                    <div class="item-header">
                        <h3>Item</h3>
                    </div>

                    <div class="item-description">
                        <p>Description</p>
                    </div>
                </div>


项目
描述

这就是我目前设置这个菜单部分的方式，有3个单独的“menu column”div，每个div包含5个嵌套的“menu item”div

谢谢大家

下面的精简框架应该动态创建一个框架页面，并根据您的请求使用指定的信息填充该页面。我不知道CSS文件的名称，因此您显然必须包含该名称，但这应该向您展示如何动态构建一个包含未知数量的近似相同内部结构的页面：

JSFiddle：


变量菜单=[
[“item0”、“desc0”]、[“item1”、“desc1”]、[“item2”、“desc2”]、//第1行
[“项目3”、“说明3”]、[“项目4”、“说明4”]、[“项目5”、“说明5”]、//第2行
[“项目6”、“说明6”]、[“项目7”、“说明7”]、[“项目8”、“说明8”]、//第3行
[“item9”，“desc9”]，[“itemA”，“descA”]，[“itemB”，“descB”]，//第4行
[“itemC”，“descC”]，[“itemD”，“descD”]，[“itemE”，“descE”]，//第5行
];
函数CreateBasicDiv（类名）
{
var div=document.createElement（“div”）；
div.className=className；
//可选：指定您需要/想要的任何其他DIV参数。。。
返回div；
}
函数CreateItemDiv（项，描述）
{
var div=[]，class=[“菜单列包装器”、“菜单列”、“菜单项”、“项标题”、“项描述符”]；
//迭代地创建一系列具有适当类名的元素
对于（var i=0；i“
div[2]。appendChild（div[3]）；
div[2]。appendChild（div[4]）；
//“嵌套”div的。。。
对于（变量i=2；i>0；）
div[i-1].appendChild（div[i--]）；
返回div[0]；
}
函数CreateMenu（）
{
var table=document.createElement（“表”），
colCount=3，i=0，width=Math.round（90/colCount）；
//替代这些设置的类定义：
table.style=“位置：相对；宽度：90%；左侧：5%；顶部：50px；表格布局：固定；”；
while（i

您可以使用下面的代码解决这个问题

基本上，它是通过javascript使用模板文本来解决的

index.html

<html lang="en">
 <head>
  <script src="index.js"></script>
 </head>
 <body>
  <div class="menu-column-wrapper" />
 </body>
</html>

index.js

document.addEventListener('DOMContentLoaded', (event) => {
  const menuItem = `
    <div class="menu-item">
    <div class="item-header">
      <h3>Item</h3>
     </div>
    <div class="item-description">
      <p>Description</p>
    </div>
  </div>
  `
  const menuColumn = `
    <div class="menu-column">
      ${menuItem}
      ${menuItem} 
      ${menuItem} 
      ${menuItem} 
      ${menuItem} 
    </div>
    `
  const menuColumnWrapper = document.querySelector('.menu-column-wrapper');
  menuColumnWrapper.innerHTML = `
    ${menuColumn}
    ${menuColumn}
    ${menuColumn}
  `
});

document.addEventListener（'DOMContentLoaded'，（事件）=>{
常量菜单项=`
项目
描述
`
常量菜单列=`
${menuItem}
${menuItem}
${menuItem}
${menuItem}
${menuItem}
`
const menuColumnWrapper=document.querySelector（“.menu列包装器”）；
menuColumnWrapper.innerHTML=`
${menuColumn}
${menuColumn}
${menuColumn}
`
});

您可以使用html引擎，如或等。。。使用html代码将锁定以下内容：

<div class="menu-column-wrapper">
   {{#each food}}
    <div class="menu-column">
         <div class="menu-item">
              <div class="item-header">
                   <h3>{{this.Item}}</h3>
              </div>
              <div class="item-description">
                 <p>{{this.Description}}</p>
              </div>
         </div>
    </div>
   {{/each}}
</div>

您可以使用网格或flex box

。菜单列包装器{
显示：网格；
网格模板列：自动；
网格模板行：自动；
宽度：最小含量；
高度：自动；
边框：1px灰色实心；
}
.菜单项{
位置：相对位置；
宽度：自动；
高度：自动；
填充：0 20px 0 20px；
文本对齐：居中；
边框：1px灰色实心；
}
h3{
空白：nowrap；
}
img{
宽度：75px；
高度：自动；
}
p{
字号：9pt；
}


鸡肉派
这是对一些食物的描述。它有鸡肉和胡萝卜
项目
描述
项目
描述
项目
描述
项目
描述
项目
描述
项目
描述
咖哩鸡
这是一道辣味菜肴，配米饭，包括辣椒和胡萝卜
项目
描述
项目
描述
项目
描述
项目
描述
项目
描述
项目
描述
项目
描述

你是想用python（flask/django）还是JavaScript来实现这一点？这如何适应他说的“不用手动为每个div编写15个几乎相同的div”的部分？？我看不出CSS信息与所问的实际问题有什么关系？OP将不得不写出项目和描述，不管他如何创建元素。我删除了他额外的

div，简化了菜单。确保他可以走js路线
food [
   {Item: 'item1', Description: 'desc1'},
   {Item: 'item2', Description: 'desc2'},
   {Item: 'item3', Description: 'desc3'}
]