Append child avec ul et li

**bj303931** · 26/01/2017, 16h20

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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!

**SpaceFrog** · 26/01/2017, 16h37

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

appende dans le li avant d'appender la li à l'ul

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**nibors** · 26/01/2017, 16h47

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
var node=document.createTextNode(v);
console.log(v)

devrait t'apporter la reponse

**bj303931** · 26/01/2017, 19h19

Merci pour votre aide mais ça ne marche pas;

**danielhagnoul** · 26/01/2017, 23h17

Envoyé par SpaceFrog

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Oui !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

Append child avec ul et li

JavaScript

Discussions similaires

Partager

Partager