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

Question

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

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

输入完成后发送 Ajax 请求，成功后我想将此代码段注入 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-*，以及bootstrap 工具提示不起作用。

Answer 1

您可以尝试创建新的 html 文件，并在您的页面中添加这样的文件

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

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

Answer 2

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

因为我试图附加到 projects 的 html 片段是在 document.ready 之后添加的（文档已加载且处理程序已绑定），所以制作新片段所需的唯一东西be active on event is to 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);
                }
              })
            }
          }
        })
       })
  })

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

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

How to append big HTML snippets into DOM with Javascript?

html

javascript

jquery

dom

ejs