Comment ajouter un élément de liste à une liste non ordonnée en JavaScript

Question

Je travaille sur une application web (liste de tâches) qui contient un formulaire et une liste. Chaque fois que l'utilisateur soumet le formulaire, l'élément soumis sera ajouté à la liste en tant que li. Je sais comment ajouter un élément de liste à ul. Mon problème est que je veux être capable de formater le nouveau li ajouté comme le précédent. Je fais le projet avec bootstrap, qui a ses propres classes prédéfinies. Donc, j'aimerais ajouter de nouveaux li avec ces classes. Voici l'application web en ligne http://pctechtips.org/apps/todo/ Voici à quoi ressemblera un seul li et donc lorsque de nouveaux li sont ajoutés, j'aimerais savoir comment je peux garder le même format

Morbi leo risus

// fichier javascript

//variables
// un tableau todoList pour contenir (titre, description) pour chaque élément de tâche
var todoList = [{
    title: "Acheter des courses",
    desc: "aller à win-dixie et acheter du pain, du jambon et du fromage"
  },
  {
    title: "Payer l'assurance voiture",
    desc: "appeler State Farm et payer l'assurance annuelle"
  },
  {
    title: "Faire ceci",
    desc: "c'est une autre description d'élément de tâche"
  }
]

/*
 * Script corps principal
 */
$(document).ready(function() {
  //cacher le formulaire lorsque le document se charge pour la première fois
  $("#submit-form").hide();

  //écouteur pour la fonctionnalité d'affichage / masquage du formulaire
  $("#add-todo").click(function() {
    toggleForm();
    return false; //retourner false pour empêcher le rechargement de la page
  });

  //écouteur pour ajouter un nouvel élément de formulaire (bouton de soumission)
  $(".btn").click(function() {
    console.log("élément soumis");
    addToList();
  });
});

//fonctionnalité pour afficher / masquer le formulaire
function toggleForm() {
  if ($("#submit-form").is(":hidden")) {
    console.log("formulaire déployé");
    $("#submit-form").show("slow");
    $("#form-icon").removeClass("fa-plus-square-o");
    $("#form-icon").addClass("fa-minus-square-o");
  } else {
    console.log("formulaire masqué");
    $("#submit-form").hide("slow");
    $("#form-icon").removeClass("fa-minus-square-o");
    $("#form-icon").addClass("fa-plus-square-o");
  }
}

//ajouter un nouvel élément à la liste des tâches
function addToList() {
  //obtenir les données des champs d'entrée
  var todoTitle = $("#todo-title").val();
  var todoDesc = $("#todo-desc").val();
  //vérifier l'entrée de l'utilisateur
  if (todoTitle == null || todoDesc == null) {
    alert("remplissez tous les champs !");
  } else {
    console.log(todoTitle + "\n" + todoDesc);
    //ajout d'un nouveau li à ul   
    var ul = document.getElementById("list");
    var li = document.createElement("li");
    li.appendChild(document.createTextNode(todoTitle));
    ul.appendChild(li);
    // li.innerHtml = ""+todoTitle+""

  }
}

  Application TodoList

     TodoList

       Entrez un nouvel élément de tâche

          Soumettre la tâche

      Éléments de la liste de tâches

           Payer l'assurance voiture

          Dapibus ac facilisis in

          Morbi leo risus

Answer 1

Vous utilisez Jquery. Vous pouvez donc l'utiliser pour ajouter des classes et ajouter des éléments enfants.

var ul = document.getElementById("list");
var li = document.createElement("li");

$(li).addClass("list-group-item d-flex justify-content-between align-items-center");
$(li).append(document.createTextNode(todoTitle));
$(li).append(($('')));

La seule chose que j'ai ajoutée est la méthode addClass() et la méthode append() pour ajouter les classes requises et ajouter l'icône de poubelle.

Vérifiez le fiddle ici : Fiddle

J'espère que cela vous aidera !

Answer 2

Avant d'ajouter le nouveau li, vous pouvez faire ceci pour correspondre aux classes :

$precedent = $(ul.children[ul.children.length-1]);
$(li).attr('class', $precedent.attr('class'));

Et copiez la poubelle :

$('i', $precedent).clone().appendTo(li);

Cela doit être fait dans addToList() juste avant .appendChild(li)