Add Liste Gruppenelement, das ein Formular mit Eingaben in einen ul enthält unter Verwendung von JS

Question

Das ist mein Markup in HTML5

<ul class="list-group"> 
    <li class="list-group-item"> 
     <form action="" method="post"> 
      <div> 
       <span class="categoryname"><?php htmlout($category['name']); ?></span> 
       <input type="hidden" class="id" name="id" value="<?php echo $category['id']; ?>"> 
       <input type="hidden" name="project" value="<?php echo $projectid; ?>"> 
       <button type="button" name="action" value="Edit" class="edit btn pull-right btn-link" data-toggle="tooltip" title="Edit Name"> 
        <i class="glyphicon glyphicon-edit" style="font-size: large; color: black"></i> 
       </button> 
      </div> 
     </form> 
    </li> 
</ul> 

Wie kann ich ein li zum ul mit JQuery/JS auf eine Schaltfläche klicken hinzufügen? Neu bei Web-Technologien und Entwicklung. Hilfe geschätzt.

Answer 1

, wenn Sie HTML mit Jquery hinzufügen möchten, können Sie die Methoden verwenden .append/.html ...

http://api.jquery.com/append/

so was können Sie tun, ist die HTML kopieren und fügen Sie es

$('#myButton').on('click', function(e) { 
    var html = $('#what-i-want-to-copy').html(); // returns a string 
    $('#ul').append(html) 

    // or you can add plain text 
    $('#ul').append('<li></li>') 
}) 

aber ich sehe, Sie verwenden PHP in Ihrem Code dort, und alles, was Code-Snippet tun wird, kopiert die HTML gerendert, wie es ist, und ich nehme an, Sie wollen es mit einigen Daten vom Server, so würde ich vorschlagen Verwenden Sie Vorlagen und ret Rufen Sie die Daten bei Klick ab und hängen Sie dann den HTML-Code mit dieser Vorlage und den Daten an.

Lesen Sie mehr:

Explanation of <script type = "text/template"> ... </script>

Answer 2

reine JavaScript-Lösung.

function foo() { 
 
//assuming this is the first DOM element with "list-group" class. 
 
document.querySelector(".list-group").innerHTML += "<li>your content</li>"; 
 

 
/* 
 
or, 
 

 
document.getElementsByClassName("list-group")[0].innerHTML += "<li>your content</li>"; 
 

 
or, 
 

 
var li = document.createElement("li"); 
 
var inside = document.createTextNode("your text"); 
 
li.appendChild(inside); 
 
document.querySelector(".list-group").appendChild(li); 
 

 
*/ 
 

 

 
}

<ul class="list-group"> 
 
    <li class="list-group-item"> 
 
     <form action="" method="post"> 
 
      <div> 
 
       <span class="categoryname">Lorem</span> 
 
       <input type="hidden" class="id" name="id" value="1"> 
 
       <input type="hidden" name="project" value="2"> 
 
       <button type="button" name="action" value="Edit" class="edit btn pull-right btn-link" data-toggle="tooltip" title="Edit Name" onclick="foo()"> 
 
      Click Me 
 
       </button> 
 
      </div> 
 
     </form> 
 
    </li> 
 
</ul>