Javascript 如何使用AJAX预先编写大量HTML元素

我有一个面向学生的文件共享应用程序，使用JavaScript编写，使用Express、Mongoose、EJS作为模板引擎和AJAX

在应用程序中，我有一个创建文件夹的选项。我一切正常。用户单击“新建文件夹”，然后弹出模式，在其中写入文件夹名称并单击“创建文件夹”。文件夹被创建，如果成功，我将通过重定向到referer刷新用户页面

res.redirect（请求获取（“referer”）

我想在不刷新页面的情况下完成这项工作。所以我写了这段代码：

// When submitting new folder form trigger an AJAX function
  $("#newFolderModalForm").submit(function (event) {
    event.preventDefault();
    ajaxPostNewFolder();
  });

function ajaxPostNewFolder() {
    $.ajax({
      type: "POST",
      url: window.location + "/new-folder",
      data: $("#newFolderModalForm").serialize(),
      success: function (data) {
        var html = "test";
        $("#newFolderModal").modal("hide");
        $("#materialsTableBody").prepend(html);
      },
      error: function (e) {
        alert("Error!");
        console.log("Error: ", e);
      },
    });
  }

在这段代码中，用户单击“创建文件夹”按钮，就会调用ajaxPostNewFolder函数，因为一切都成功了，所以一个HTML文本“test”会被预先添加到一个表体中

不过，我想预先添加一个完整的
元素，其中包括一个SVG图标、按钮和所创建文件夹的名称

在我的应用程序的另一部分中，我是这样做的：

var html =
      '<li>' +
      data.abbreviation +
      ', ' +
      data.name +
      '</li>';

var-html=
“
”+
数据。缩写+
', ' +
data.name+
“
”；

一个问题是，对于新创建的文件夹，我必须预先添加或附加许多HTML元素。如果我这样做的话，html变量就会变得混乱

做这件事的首选方式是什么

谢谢大家!
 您可以重复使用相同的逻辑为传入数据响应中的每个属性添加
tr
和
td
元素

类似这样的东西会用任何自定义HTML（例如，
div
，
img
，
按钮
）附加一个表行和tabel单元格

const row=$（'table'）。追加（“”）；
常量单元格=（）=>$（''）.appendTo（行）；
cell（）.html（/*自定义html*/）；

您还可以重用创建html元素的逻辑

const image=（src，alt）=>$（``）
常量按钮=（文本，onclick）=>$（`${text}`）。单击（onclick）
cell（）.append（image（'image url'，'image alt'）；
cell（）.append（按钮（'button text'，（）=>console.log（'button clicked'））；