使用Javascript循环创建多个HTML元素

我想使用javascript循环来创建多个HTML包装器元素，并将JSON响应API数据插入一些元素（图像、标题、url等）

这是我需要一行一行去做的事情吗

<a class="scoreboard-video-outer-link" href="">
  <div class="scoreboard-video--wrapper">
    <div class="scoreboard-video--thumbnail">
      <img src="http://via.placeholder.com/350x150">
    </div>
    <div class="scoreboard-video--info">
      <div class="scoreboard-video--title">Pelicans @ Bulls Postgame: E'Twaun Moore 10-8-17</div>
    </div>
  </div>
</a>

然后我基本上对所有嵌套的HTML元素重复这个过程

• 创建A标签
• 为A标签创建类和href属性
• 将类名和url附加到属性
• 将A标记附加到主包装器

• 创建DIV

• 为DIV创建类属性
• 将DIV追加到新追加的A-tag

---

如果你能告诉我做我在这里要解释的事情的最佳方法，我将不胜感激？看起来会变得非常混乱。

看看这个-[下划线.\u模板] 它非常小，在这种情况下非常有用。 （）

const targetElement=document.querySelector（“#target”）
//定义模板
常量模板=下划线模板(
'');
//定义模板的值
常量对象={
链接：{
类名：'记分板视频外部链接'，
url:“#someurl”
},
包装器：{
className:'记分板视频--包装器'
},
缩略图：{
className:'记分板视频--缩略图'，
图像：'http://via.placeholder.com/350x150'
},
信息：{
className:'记分板视频--信息'，
标题：{
类名：'记分板视频-标题'，
文字：“鹈鹕队@公牛队赛后：E`Twaun Moore 10-8-17”
}
}
};
//构建模板，并将innerHTML设置为output元素。
targetElement.innerHTML=模板（obj）
//当然，你可以像这样进入forEach循环
常量arr=[obj，obj，obj]；//从对象创建数组
arr.forEach（item=>targetElement.innerHTML+=模板（item））

qq

短版

长版本 你会发现许多解决这个问题的方法。但这可能不是重点。问题是：这是对的吗？你可能会使用错误的工具来解决这个问题

我使用过做类似事情的代码。我没有写，但我必须用它。您会发现这样的代码很快变得非常难以管理。你可能会想：“哦，但我知道它应该做什么。一旦它完成了，我就不会改变它。”

代码分为两类：

• 您停止使用的代码，因此不需要更改
• 您一直在使用的代码，因此需要更改

所以，“它有效吗？”不是正确的问题。有很多问题，但其中一些是：“我能维持这个吗？它容易阅读吗？如果我改变了一个部分，它是只改变了我需要改变的部分，还是也改变了我不想改变的其他部分？”

我想说的是，你应该使用一个模板库。JavaScript有很多优点

通常，您应该使用一个完整的JavaScript应用程序框架。现在主要有三种：

• 反应
• Vue.js
• 角度2

为了诚实起见，请注意，我没有听从自己的建议，仍然使用Angular。（原版，不是角度2。）但这是一条陡峭的学习曲线。有很多库也包括模板功能

但很明显，您已经建立了一个完整的项目，您只想在现有JavaScript代码中插入一个模板。您可能需要一种模板语言，它能够完成自己的任务，并且不碍事。当我开始的时候，我也希望如此。我使用了Markup.js。它很小，很简单，而且它能满足你在这篇文章中的需求

---

这是第一步。我想这正是你需要的。从这一点开始，以你的方式及时构建完整的框架。

以下是我的答案。上面有记号。为了查看代码片段中的效果，您必须进入开发人员控制台检查包装器元素或查看开发人员控制台日志

我们基本上创建了一些助手方法来轻松地创建元素并将它们附加到DOM中——这并不像看上去那么难。这也让您可以轻松地将JSON检索到的对象作为属性附加到元素中

这里有一个基本的版本，让你知道发生了什么以及如何使用它

//create element function

function create(tagName, props) {
  return Object.assign(document.createElement(tagName), (props || {}));
}

//append child function

function ac(p, c) {
  if (c) p.appendChild(c);
  return p;
}

//example: 
//get wrapper div
let mainWrapper = document.getElementById("mainWrapper");

//create link and div
let link = create("a", { href:"google.com" });
let div = create("div", { id: "myDiv" });

//add link as a child to div, add the result to mainWrapper
ac(mainWrapper, ac(div, link));

//创建元素函数
函数创建（标记名、道具）{
返回Object.assign（document.createElement（标记名），（props |{}）；
}
//附加子函数
功能ac（p，c）{
如（c）p.c；
返回p；
}
//例如：
//获取包装器div
让mainWrapper=document.getElementById（“mainWrapper”）；
//创建链接和div
let link=create（“a”，{href:“google.com”，textContent:“此文本是div中的链接”}）；
让div=create（“div”，{id:“myDiv”，textContent:“此文本在div中！”}）；
//将链接作为子项添加到div，将结果添加到mainWrapper
ac（主包装，ac（分区，链接））
div{
边框：3倍纯黑；
填充物：5px；
}
到目前为止，您尝试了哪些内容？您对上述内容中的哪一部分有问题？我正在进行上述工作。例如：var link=document.createElement（'a'）；document.getElementsByTagName（“a”）[0].setAttribute（“类”，“记分板视频外部链接”）；document.getElementsByTagName（“a”）[0].setAttribute（“url”，”）；mainWrapper.appendChild（链接）；然后我基本上对所有嵌套的HTML元素重复这个过程。像这样模板化HTML是一个非常常见的问题。非常常见，事实上，有很多JavaScript框架可以做到这一点。我建议您研究React、Vue或Angular之类的框架。谢谢Sidney。我将进一步研究这些框架。我以前使用Vue创建但我不会创建这样的循环。这最终会出现在Drupal页面上，所以我也必须更深入地探讨这段婚姻。@4ndy请编辑/更新您的问题，并包括您尝试过的内容。谢谢。回答得很好。谢谢。我意识到我可能应该使用
//create element function

function create(tagName, props) {
  return Object.assign(document.createElement(tagName), (props || {}));
}

//append child function

function ac(p, c) {
  if (c) p.appendChild(c);
  return p;
}

//example: 
//get wrapper div
let mainWrapper = document.getElementById("mainWrapper");

//create link and div
let link = create("a", { href:"google.com" });
let div = create("div", { id: "myDiv" });

//add link as a child to div, add the result to mainWrapper
ac(mainWrapper, ac(div, link));