使用 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">&nbsp; &nbsp; &nbsp; &nbsp; <a href="${href}" class="item-wrap fancybox">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="icon-search2"></span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img class="img-fluid" src="${src}">&nbsp; &nbsp; &nbsp; &nbsp; </a></div>`const container = document.getElementById("container");container.insertAdjacentHTML("beforeend", html);alert(container.outerHTML);<div id="container">the container</div>