web-dev-qa-db-fra.com

Ajouter un élément de la liste via javascript

Donc, j'essaie d'imprimer un tableau auquel le texte d'entrée de l'utilisateur est ajouté, mais ce que je veux imprimer, c'est une liste ordonnée du tableau. Comme vous pouvez le constater (si vous exécutez mon code), l'élément de liste ne cesse de se voir ajouter l'entrée utilisateur, et aucun nouvel élément de liste n'est ajouté avec le nom des personnes. S'il vous plaît aider! Voici le code ci-dessous:

 <!DOCTYPE html>
 <html>
 <head>
 First name: <input type="text" id="firstname"><br> 

 <script type="text/javascript">
 var x= [];

 function changeText2(){
var firstname = document.getElementById('firstname').value;
document.getElementById('boldStuff2').innerHTML = firstname;
x.Push(firstname);
document.getElementById('demo').innerHTML = x;
 }
 </script>

 <p>Your first name is: <b id='boldStuff2'></b> </p> 
 <p> Other people's names: </p>

 <ol>
     <li id = "demo"> </li> 
 </ol>

 <input type='button' onclick='changeText2()'   value='Submit'/> 

 </head>
 <body>
 </body>
 </html>
javascriptdom
19
user2581598

Si vous voulez créer un élément li pour chaque entrée/nom, vous devez le créer, avec document.createElement[MDN] .

Donnez à la liste l'ID:

<ol id="demo"></ol>

et obtenir une référence à ce sujet:

var list = document.getElementById('demo');

Dans votre gestionnaire d'événements, créez un nouvel élément de liste avec la valeur d'entrée en tant que contenu et ajoutez-le à la liste avec Node.appendChild[MDN] :

var firstname = document.getElementById('firstname').value;
var entry = document.createElement('li');
entry.appendChild(document.createTextNode(firstname));
list.appendChild(entry);

D&EACUTE;MO

54
Felix Kling

On m'a récemment présenté ce même défi et je suis tombé sur ce fil, mais j'ai trouvé une solution plus simple en utilisant append ...

var firstname = $('#firstname').val();

$('ol').append( '<li>' + firstname + '</li>' );

Stockez la valeur prénom puis utilisez append pour ajouter cette valeur en tant que li à la ol. J'espère que ça aide :)

4
Jesse Novotny

Essayez quelque chose comme ça:

var node=document.createElement("LI");
var textnode=document.createTextNode(firstname);
node.appendChild(textnode);
document.getElementById("demo").appendChild(node);

Fiddle: http://jsfiddle.net/FlameTrap/3jDZd/

4
Flame Trap

La réponse ci-dessus m'a été utile, mais il pourrait être utile (ou meilleure pratique) d'ajouter le nom lors de l'envoi, comme je me suis retrouvé. Espérons que cela sera utile à quelqu'un. Exemple CodePen

    <form id="formAddName">
      <fieldset>
        <legend>Add Name </legend>
            <label for="firstName">First Name</label>
            <input type="text" id="firstName" name="firstName" />

        <button>Add</button>
      </fieldset>
    </form>

      <ol id="demo"></ol>

<script>
    var list = document.getElementById('demo');
    var entry = document.getElementById('formAddName');
    entry.onsubmit = function(evt) {
    evt.preventDefault();
    var firstName = document.getElementById('firstName').value;
    var entry = document.createElement('li');
    entry.appendChild(document.createTextNode(firstName));
    list.appendChild(entry);
  }
</script>
1
inkpixelspaper