Append child avec ul et li

Version imprimable

Bonjour, j'aimerais créer ceci (avec les puces devant;)):

oçoo

uju
zeeze
jji
jij

Bref, j'utilise, appendChild(). Or, ici au lieu d'ajouter toujours un élément (p...) Je veux ajouter 2 éléments (en l'occurence ul et li.;)) Or, je n'y parvient pas seul une liste sans tabulation aparaît. :(

Mon code:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 <!DOCTYPE html> <html> <body> <div id="3"> <h1 id="id01">Taxonimie</h1> <p id="id02"></p> concept: <input id="r" type="text"> parent: <select><option value="parent">(racine)</option></select> <button type="button" onclick="go()">Ajouter</button> </div> <script> function go(){ var ul=document.createElement("ul"); var li=document.createElement("li"); var v=document.getElementById("r").value; var node=document.createTextNode(v); ul.appendChild(li); li.appendChild(node); var element=document.getElementById("3"); element.appendChild(ul); ul.appendChild(li);} </script> </body> </html>
Merci pour votre aide! ;)

26/01/2017, 16h37
SpaceFrog
Code:

1 2 ul.appendChild(li); li.appendChild(node);
appende dans le li avant d'appender la li à l'ul
Code:

1 2 li.appendChild(node); ul.appendChild(li);
26/01/2017, 16h47
nibors
Bonjour,

si je ne me trompe pas tu ajoutes node qui a la valeur de v.
As tu verifié que v n'a pas une valeur nulle ?
Code:

1 2 3 var node=document.createTextNode(v); console.log(v)
devrait t'apporter la reponse
26/01/2017, 19h19
bj303931

Merci pour votre aide mais ça ne marche pas;:roll:

Citation:

Envoyé par SpaceFrog

[...] append dans le li avant d'append la li à l'ul

Code:

1
2
li.appendChild(node);
ul.appendChild(li);

Oui !

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="author" content="Daniel Hagnoul">
  <title>Test</title>
  <style>
 
  </style>
  <script>
    'use strict';
 
    document.addEventListener( 'DOMContentLoaded', ev => {
 
    }, false );
 
    window.addEventListener( 'load', ev => {
 
      document.querySelector( "#btnGo" ).addEventListener( "click", ev => {
        let
          ul = document.createElement( "ul" ),
          li = document.createElement( "li" ),
          v = document.querySelector( "#r").value,
          node = document.createTextNode( v ),
          element = document.querySelector( "#id3" );
 
        li.appendChild( node );
        ul.appendChild( li );
        element.appendChild( ul );
      }, false )
 
    }, false );
  </script>
</head>
<body>
  <main>
 
    <div id="id3">
      <h1 id="id01">Taxonimie</h1>
      <p id="id02"></p>
      concept: <input id="r" type="text">
      parent: <select>
        <option value="parent">(racine)</option>
      </select>
      <button id="btnGo">Ajouter</button>
    </div>
 
  </main>
</body>
</html>