如何使用 Javascript 将大的 HTML 片段附加到 DOM 中？

Question

我有一个使用 EJS 模板来填充数据的应用程序。

为了添加新项目，我制作了一个简单的输入表单，其中包含所有必需的参数。

在输入完成发送 Ajax 请求后，如果成功，我想将此 sn-p 注入 DOM。

简单来说 - 添加新项目后，我想通过注入 DOM 来立即显示播放 无需重新加载页面

有没有一种优雅的方法可以将此div 梯形图作为模板插入到 DOM 中？有效，

<div class="projects">
    <div class="projectHeader">
          <div class="projectTitle">
            <span>
              <a data-toggle="modal" data-target="#editDeadLineModal">
                <i data-id="<%=project.id%>" class="projectDeadline far fa-calendar-alt fa-2x" data-toggle="tooltip" data-placement="top" title="Set Deadline"></i>
              </a>
            </span>
            <h5 class="projectName <%=project.id%>" data-toggle="tooltip" data-placement="top" title="Deadline <%=deadline%>" style="align-items: center;">
              <%=project.name%>
            </h5>
            <%}%>
          <div class="projectButtons">
            <span data-toggle="tooltip" data-placement="top" title="Edit Project Title">
              <a data-toggle="modal" data-target="#editProjectTitleModal">
          <i id="editProjectName" class="editProject fas fa-pencil-alt" data-name="<%=project.name%>" data-id="<%=project.id%>"></i>
            </a>
            </span>
    
            <i class="separatorDash fas fa-minus"></i>
    
            <span data-toggle="tooltip" data-placement="top" title="Delete Project">
              <a data-toggle="modal" data-target="#deleteProjectModal">
                <i id="deleteProject>" class="deleteProject far fa-trash-alt" data-id="<%=project.id%>"></i>
              </a>
            </span>
          </div>
        </div>
      </div>
</div>

我尝试的是在string 中重新创建整个 div 阶梯并将其附加到父节点。

像这样：

    // Add new Project
    $('#addNewProjectBtn').on("click", function() {
    $("#newProjectModal").on('show.bs.modal', function() {
      $(".confirmNewList").on("click", function(event) {
          var url = '/addNewList';
          var newListTitle = $("#newListNameInput").val()
          event.preventDefault();
          $.post({
            url: url,
            data: {
              listName: newListTitle
            },
            success: function(result) {
              $("#newProjectModal").modal('hide')
              $("#newListNameInput").val('');
              var id = result.data.id
              var name = result.data.name
                  
//Append new project 
                  $(".projects").append("<div class='project col-4' id='project" + id + "'> <div class='projectHeader'> <div class='projectTitle'> ...and so on until the end")
                },
                error: function(err) {
                  console.log(err);
                }
              })
            }
          }
        })
       })
  })

简单来说 - 添加新项目后，我想通过注入 DOM 来立即显示播放 无需重新加载页面

有没有更优雅和特别有效的方法将这个 div 梯形图作为模板插入到 DOM 中？

我在上面尝试过的方法 - 有效，但是尝试通过调用模态与它进行交互 - 模态不会得到它的 data-*，引导工具提示也不起作用。

Answer 1

1. 您可以尝试创建新的 html 文件，然后在您的页面中添加这样的内容

   $.get("yourfile.html", function (data) {
     $("#appendToThis").append(data);    // or use .html();
   });
   

2. 或者你可以直接从你的后端传递这个 HTML 结构，所以你可以直接使用 append 函数。

Answer 2

经过一番研究，我发现event handler 可以被委托。

由于我试图附加到projects 的html sn-p 是在document.ready 之后添加的（文档已加载并且处理程序已绑定），因此唯一需要使新的sn-p 在事件中成为active是 delegate 的事件处理程序到元素的父元素 appended。

像这样：

$("body").delegate("#addNewProjectBtn", "click", function() {
$("#newProjectModal").on('show.bs.modal', function() {
      $(".confirmNewList").on("click", function(event) {
          var url = '/addNewList';
          var newListTitle = $("#newListNameInput").val()
          event.preventDefault();
          $.post({
            url: url,
            data: {
              listName: newListTitle
            },
            success: function(result) {
              $("#newProjectModal").modal('hide')
              $("#newListNameInput").val('');
              var id = result.data.id
              var name = result.data.name
                  
                 //Append new project 

                  $(".projects").append("<div class='project col-4' id='project" + id + "'> <div class='projectHeader'> <div class='projectTitle'> ...and so on until the end")
                },
                error: function(err) {
                  console.log(err);
                }
              })
            }
          }
        })
       })
  })

通过将事件处理程序委托给它的父级 - 事件处理程序保留在父级中。