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元素之前添加一个新的.project-content-new元素及其所有内容。

Answer 1

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

＆＃13;

$(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);
  });
});

＆＃13;

Answer 2

你的jQuery代码有错误;

工作代码是

＆＃13;

$(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);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

＆＃13;

Answer 3

$(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').prepend(project);
   });
});

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

3 个答案: