Javascript pour créer un li et les ajouter à l'ol

Je suis en train d'utiliser JavaScript pour créer un li et l'ajouter à un ol. Le code que j'utilise est

<ol id=summaryOL>
</ol>

function change(txt) {
var x=document.getElementById("summaryOL");
newLI = document.createElementNS(null,"li");
newText = document.createTextNode(txt);
newLI.appendChild(newText);
x.appendChild(newLI);
}

change("this is the first change");
change("this is the second change");

Ces devrait ressembler à:

1. this is ...
2. this is ...

Mais regardez comme:

this is the first changethis is the second change

J'ai créé un violon à: violon . Merci pour toute aide.

InformationsquelleAutor Andrew Clear | 2012-02-02
  1. 5

    Ici est un exemple - jsfiddle

    $(function() {
    var change = function( txt ) {
        $("#summaryOL").append( '<li>' + txt + '</li>' );
    };

    change("this is the first change");
    change("this is the second change");
});

    Utiliser jquery, mettre ci-dessous le code à l'intérieur de <head></head>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    InformationsquelleAutor InspiredJW
  2. 1

    Essayer Ci-Dessous. Il a travaillé pour moi. Supprimer la valeur null à partir de

    newLI = document.createElementNS(null,"li");

function change(txt) {

    var x=document.getElementById("summaryOL");
    newLI = document.createElement("li");

    newText = document.createTextNode(txt);
    newLI.appendChild(newText);
    x.appendChild(newLI);
    alert('DONE');

    }
    InformationsquelleAutor Saurabh
  3. 0

    Votre violon n'est pas pertinent à votre question...

    Dans votre violon, il fonctionne très bien mais vous ne devriez jamais avoir une ID qui commence avec un certain nombre.

    Dans votre question, createElementNS est inutile - il suffit d'utiliser createElement('li') à la place.

    InformationsquelleAutor Niet the Dark Absol
  4. 0

    Viens de regarder et ce et ne peux pas croire qu'il n'a pas été répondu sans jQuery, il suffit de le mettre ici. En Vanilla JS, vous pouvez le faire:

    const ol = document.querySelector("#summaryOL");
const li = document.createElement('li');
const text = document.createTextNode(txt);
li.appendChild(text);
ol.appendChild(li);

    ou alternativement, en modifiant innerHTML de ol nœud directement:

    document.querySelector('#summaryOL').innerHTML =
  changes
    .map(txt => `<li>${txt}</li>`)
    .join('');
    InformationsquelleAutor Maggie
  5. -1

    Si vous utilisez jQuery, vous pouvez essayer ceci:

    var item= "<li>" + "some info" + "</li>" ;
$("#items").html($("#items").html() + var);

    et, évidemment, l'ajout à la liste en est une autre solution.

    InformationsquelleAutor arun k