使用 Javascript 分层附加 DOM 元素

Question

我正在为自己创建一个投资组合网站。为了加快添加更多照片的过程并以这种方式自动维护它，而不是每次都添加新的 HTML，我正在创建一个脚本，以便自动将指定文件夹的图像内容添加到图库中。我找到了一个我正在使用的模板，该模板适用于准系统入门网站，并且目前正在对其进行自定义以更好地满足我的需求。他们用于维护允许基于主题等进行图像过滤的流体盒/画廊的模板如下：<div class="item landscape col-6 col-sm-6 col-md-6 col-lg-4 col-xl-4 mb-4">        <a href="images/landscape/land_01.jpg" class="item-wrap fancybox">          <span class="icon-search2"></span>          <img class="img-fluid" src="images/landscape/land_01.jpg">        </a></div>我可以在其中指定第二类标签以确定如何过滤它，并更新href链接的 和src图像的 ，以便将其设置为文件夹中的下一张照片。但是，现在我遇到了让我的 Javascript 创建具有此层次结构的元素的问题。目前我设计的脚本是这样的：var outer = document.createElement("div");outer.className = "item landscape col-6 col-sm-6 col-md-6 col-lg-4 col-xl-4 mb-4";var reference = document.createElement('a');reference.href = "images/landscape/land_02.jpg";reference.className = "item-wrap fancybox";reference.innerHTML = "Test";var spanner = document.createElement("SPAN");spanner.className = "icon-search2";var thepic = document.createElement("IMG");thepic.className = "img-fluid";thepic.src = "images/landscape/land_02.jpg";reference.appendChild("spanner");reference.appendChild("thepic");outer.appendChild("reference");var container = document.getElementById("posts");container.appendChild(thepic);然而，这始终给我一个错误Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.，我已经研究了这个错误，当我简化脚本以仅将链接附加到容器元素时，这有效，但是每当我尝试附加到我尝试使用 Javascript 创建的 DOM 元素时，它都失败了.我将不胜感激你们可以提供的任何帮助！

Answer 1

您的代码存在多个问题。

首先，在引用变量时，您使用的是带有名称的字符串。这是错误的，您可以而且应该只使用它而不使用引号。像这样：

reference.appendChild("spanner");

reference.appendChild("thepic");

outer.appendChild("reference");

应该

reference.appendChild(spanner);

reference.appendChild(thepic);

outer.appendChild(reference);

其次，更重要的是，您可能应该使用一些模板引擎来做这类事情。手动更换会很快变得很麻烦。你不必使用现代和花哨的框架（如 React、Angular、Vue 等）来做到这一点。例如，您可以检查https://github.com/janl/mustache.js或https://ejs.co/ 之类的内容，让您的生活更轻松。

Answer 2

通过多行字符串和变量插值，您可以直接在代码中使用 HTML。插入方法是insertAdjacentHTML。

const clss = "landscape";

const src = "images/landscape/land_01.jpg";

const href = "images/landscape/land_01.jpg";

const html = `<div class="item ${clss} col-6 col-sm-6 col-md-6 col-lg-4 col-xl-4 mb-4">

        <a href="${href}" class="item-wrap fancybox">

          <span class="icon-search2"></span>

          <img class="img-fluid" src="${src}">

        </a>

</div>`

const container = document.getElementById("container");

container.insertAdjacentHTML("beforeend", html);

alert(container.outerHTML);

<div id="container">the container</div>