Je veux ajouter des éléments HTML avant certains autres éléments HTML via un formulaire utilisant jQuery:

Code 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>

La forme:

<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>

Le code jQuery que j'ai essayé:

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

Je pensais que cela devrait fonctionner de cette façon, mais cela ne fonctionne pas, comment puis-je atteindre ce que je veux atteindre? J'ai également essayé d'utiliser la fonction jQuery .submit() au lieu de la fonction .click() mais cela n'a pas fonctionné non plus.

Je veux ajouter un nouvel élément .project-content avec tout son contenu avant l'élément .project-content-new.

0
Tywele 20 juil. 2015 à 13:07

3 réponses

Meilleure réponse

Modifiez votre code js comme suit et cela devrait très bien fonctionner.

$(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);
  });
});
1
Ammadu 20 juil. 2015 à 10:25

Vous avez une erreur dans votre code jQuery;

Le code de travail est

$(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);
  });
});
<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>
0
Bhavin Solanki 20 juil. 2015 à 10:11
$(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);
   });
});
0
Nageshwari P 20 juil. 2015 à 10:13