Une erreur en créant un div dynamiquement dans un petit code.

Version imprimable

Salut, j'ai ce petit code pour créer un Div dans un div existant nommé 'corps'.
L'erreur affiche :

Citation:

Uncaught TypeError: Cannot read properties of null (reading 'appendChild')
Code:

1 2 3 4 5 6 7 8 9 10 var newDiv = document.createElement("div"); // Ajoute le Div au DOM. let place=document.getElementById('corps'); newDiv.style.position="absolute"; newDiv.style.backgroundColor="red"; newDiv.id='mondiv'; newDiv.style.width=100+"px"; newDiv.style.height=100+"px"; console.log(newDiv); place.appendChild(newDiv);
Le console.log affiche :

Code:

<div id="mondiv" style="position: absolute; background-color: red; width: 100px; height: 100px;"></div>

Si j'arrive à créer ce div 'mondiv', je voudrais lui attribuer un evennement onclick() ;)

09/01/2022, 16h03
Archimède

Salut ton id est mondiv et tu fais

Code:

let place=document.getElementById('corps');

. Normal ! Tu remplaces corps par mondiv... ou tu fais

Code:

id="corps"

Si tu fais référence à un div qui n'est pas appelé avec le bon identifiant, tu as forcément une erreur...
10/01/2022, 09h09
Programir
Salut, Ah je vois ce que tu veux dire, merci de ton aide ;)

Mais comment je peux faire pour mettre "mondiv" dans le div "corps" ?
Celui-ci est dans un div qui se nomme "contener", lui-même dans le body.
Code:

1 2 3 4 5 6 7 <body> <div id="contener"> <div id="corps"> // "mon code" (c'est là où je voudrais mettre "mondiv" en absolu). </div> </div> </body>
Donc j'ai essayé ça :

Code:

document.contener.corps.appendChild(newDiv);

Mais j'ai toujours la même erreur.
10/01/2022, 14h10
NoSmoking
Bonjour,
ton premier code d'insertion est correct mais arrive trop tôt dans ta page, l’élément <div id="corps"> n'existant encore pas lorsque tu cherches à l'utiliser.
Code:

1 2 3 4 5 6 7 8 9 <body> <div id="contener"> <div id="corps"> </div> </div> <script> // ton code est à mettre ici ou doit être appelé sur le load de la page </script> </body>
Code:

1 2 3 4 5 <script> window.addEventListener("load", function() { // ton code ici }); </script>
dans ce dernier cas le script peut être placé où tu veux, dans la partie <head> par exemple ou dans un fichier séparé
10/01/2022, 14h39
Programir

Ah merci beaucoup, je vais essayer ça ;)

Mais je dois laisser : place=document.get....

ou document.contener.corps

ou autre chose ?

je veux acceder à "corps" et y mettre le child "mondiv"
mais je sais pas comment on accede à corps.

EDIT : J'ai reussi à reconnaitre le div corps, merci beaucoup !!!
effectivement mon premier code était bon mais il trouvait pas le div corps, et là c'est bon ;)
10/01/2022, 15h03
NoSmoking
Citation:

Envoyé par Programir

je veux acceder à "corps" et y mettre le child "mondiv"
mais je sais pas comment on accede à corps.

et çà c'est quoi !?!

Citation:

Code:

let place=document.getElementById('corps');

Revoit, également, les bases de ces méthodes de manipulation du DOM.

Les ancestrales :
- Document.getElementById() ;
- Document.getElementsByClassName() ;
- Document.getElementsByName() ;
- Document.getElementsByTagName().
Les de plus en plus utilisées, plus souples :
- Element.querySelector() ;
- Element.querySelectorAll().
entres autres ...
10/01/2022, 18h09
Programir

ah oui, merci beaucoup !!!

mainten,ant ça marche, mais je vais quand même etudier tes liens ça me servira beaucoup ;)