JSFiddle - React, Tailwind, and code Playground

by r043v

HTML

<div id="tabNotesWrap">woot</div>

CSS

.toto li:hover { color:blue; cursor:pointer; }

JavaScript

var $tabNotes = $("<ul/>",{ id:"tabNote", class:"toto" }); // création en mémoire d'un <ul

$tabNotes.on("click","li",function(){ // event "live" sur ses <li
    var $t = $(this);
    var note = $t.data("note");
    if(note !== undefined)
         alert("note => "+note);
    else alert( $t.text() );
});

{ // remplissage de la liste
    var $notes = $(); // un objet jquery vide
    $.each( [42,16,24], function(index,value){
        var $myli = $("<li/>").text("note : " + value).data("note",value);
        $notes = $notes.add( $myli ); // ajout du <li dans l'objet jquery
    });
    $tabNotes.html( $notes ); // mass insert des <li dans le <ul, toujours en mémoire
}

$("#tabNotesWrap").html( $tabNotes ); // insertion du ul accompagné de ses <li dans le dom

$tabNotes.append("<li>hey!</li>").prepend('<li data-note="hell yeah">aaa</li>'); // apparais directement dans le dom