如何从数组对象填充 HTML div？答案

【问题标题】：How to populate a HTML div from array object?如何从数组对象填充 HTML div？
【发布时间】：2022-01-03 16:29:36
【问题描述】：

我是 ReactJS 上的 YouTube 视频，它使用 .map() 从数组对象填充 div 容器。有没有办法在简单的 HTML 中使用 vanilla js 或 jquery 来做到这一点？下面提供了 ReactJS 代码 -

ProductCategories.JSX

import { categories } from "../dataList";
import CategoryItem from "./CategoryItem";

<div className="* * *">
  {categories.map((item) => (
  <CategoryItem item={item} key={item.id} />
  ))}
</div>

CategoryItem.JSX

import styled from "styled-components";

<Container>
  <Image src={item.Image} />
  <Info>
    <Title>{item.Title}</Title>
    <Button>SHOP NOW</Button>
  </Info>
</Container>

dataList.js

export const categories = [
  {
    id: 1,
    Image: "https://i.ibb.co/CnkbTqm/download-ixid-Mnwx.jpg",
    Title: "Lorem",
  },
  {
    id: 2,
    Image: "https://i.ibb.co/CnkbTqm/download-ixid.jpg",
    Title: "Ipsum",
  },
  {
    id: 3,
    Image: "https://i.ibb.co/CnkbTqm/download.png",
    Title: "lorem",
  },
];

【问题讨论】：

你想达到什么目的？请edit你的问题添加你自己的尝试，你是否被卡住了。考虑阅读How to Ask。
你必须用那些将它们注入 DOM 的元素制作一个巨大的字符串
你只是在问如何使用 jQuery 写入页面吗？ React 代码在这里的相关性如何？目前还不清楚您具体要问什么，或者您的代码以何种方式无法按预期工作。
@David 在 jQuery 中是的。所以直接没有相关性，但我想在 HTML 中做同样的事情，这样我就不需要在源代码中对图像链接进行硬编码。
@AmitDeka：嗯，你可以先尝试一下。如果您要解决的根本问题是您不了解 jQuery，那么您可以从一些介绍性教程和示例开始。当您尝试时，什么没有按预期工作？

标签： javascript html css reactjs

【解决方案1】：

一种方式，使用reduce()：

使用reduce() 遍历类别，为每个对象返回一个字符串（连接前一个值），其中包含：
1. 使用cat.Title 创建的<h1>
2. 使用cat.Image 创建的<img>
将字符串设置为元素的innerHTML
^{使用<body> 作为演示}

const categories = [{id: 1, Image: "https://i.ibb.co/CnkbTqm/download-ixid-Mnwx.jpg", Title: "Lorem", }, {id: 2, Image: "https://i.ibb.co/CnkbTqm/download-ixid.jpg", Title: "Ipsum", }, {id: 3, Image: "https://i.ibb.co/CnkbTqm/download.png", Title: "lorem", }, ];

document.body.innerHTML = categories.reduce((prev, cat) => prev + `<h2>${cat.Title}</h2> <img src='${cat.Image}' />`, '');

我们可以使用map() 和join() 来获得相同的想法/行为/输出，而不是像这样关闭reduce()：

const categories = [{id: 1, Image: "https://i.ibb.co/CnkbTqm/download-ixid-Mnwx.jpg", Title: "Lorem", }, {id: 2, Image: "https://i.ibb.co/CnkbTqm/download-ixid.jpg", Title: "Ipsum", }, {id: 3, Image: "https://i.ibb.co/CnkbTqm/download.png", Title: "lorem", }, ];

document.body.innerHTML = categories.map(cat => `<h2>${cat.Title}</h2> <img src='${cat.Image}' />`).join('');

【讨论】：

我尝试使用您的 .map() 答案进行操作，但它没有给我所需的设计，而是在我的卡片中创建了一个新的 h2 和 img 元素。
您能否使用编辑按钮在您的问题中分享这一点？不知道你想说什么。也许您需要在这些元素周围使用<div>。

【解决方案2】：

你可以使用 createElement() api https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement

这里有一些原版的想法

var div = document.createElement('div');
var link = document.createElement('a');
var article = document.createElement('article');

在 Jquery 中

var elem = $('<div></div>')

您可以创建元素并附加到它们的容器中。

【讨论】：