javascript - 如何使用 jQuery 通过表单在其他 HTML 元素之前添加 HTML 元素？

Question

我想通过使用 jQuery 的表单在其他一些 HTML 元素之前添加 HTML 元素:

HTML 代码:

  <div class="main-content">
    <h2 class="main-content-header">Projekte</h2>
    <div class="project-content">
      <h3 class="project-header"><img class="collapse toggleBtn" src="icons/arrow_up_bl.png"><img class="expand toggleBtn" src="icons/arrow_down_bl.png">Haushalt</h3>
      <div class="project-wrapper">
        <div class="project-part">Rechnung1.doc <img src="icons/cross.png"><img class="preview-toggle" src="icons/preview.png"></div>
        <div class="project-part">Rechnung2.doc <img src="icons/cross.png"><img class="preview-toggle" src="icons/preview.png"></div>
      </div>
    </div>
    <div class="project-content">
      <h3 class="project-header"><img class="collapse toggleBtn" src="icons/arrow_up_bl.png"><img class="expand toggleBtn" src="icons/arrow_down_bl.png">Homepage</h3>
      <div class="project-wrapper">
        <div class="project-part">index.html<img src="icons/cross.png"><img class="preview-toggle" src="icons/preview.png"></div>
      </div>
    </div>
    <div class="project-content-new">
      <h3 class="project-header"><img src="icons/plus.png">Neues Projekt</h3>
    </div>
  </div>

形式:

<div class="new-content">
  <h2 class="new-content-header">Namenseingabe<img src="icons/cross.png" /></h2>
  <div>
    <form id="newName">
      <input type="text" placeholder="Projektname"/>
      <img id="savebtn" src="icons/save.png" />
    </form>
  </div>
</div>

我尝试过的 jQuery 代码:

$(document).ready(function() {
  $('#savebtn').click(function() {
    var project = $('<div class="project-content">
      <h3 class="project-header"><img class="collapse toggleBtn" src="icons/arrow_up_bl.png"><img class="expand toggleBtn" src="icons/arrow_down_bl.png">Test</h3>
      <div class="project-wrapper">
      </div>
    </div>');

    $('.project-content-new').before(project);
  });
});

我认为应该这样工作，但事实并非如此，我怎样才能实现我想要实现的目标？我还尝试使用 jQuery .submit() 而不是 .click() 函数，但这也不起作用。

我想在 .project-content-new 元素之前添加一个新的 .project-content 元素及其所有内容。

Answer 1

按如下方式更改你的 js 代码，它应该可以正常工作。

$(document).ready(function() {
  $('#savebtn').click(function() {
    var project = $('<div class="project-content">\
      <h3 class="project-header"><img class="collapse toggleBtn"\ src="icons/arrow_up_bl.png"><img class="expand toggleBtn"\ src="icons/arrow_down_bl.png">Test</h3>\
      <div class="project-wrapper">\
      </div>\
    </div>');

    $('.project-content-new').before(project);
  });
});