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

**Programir** · 09/01/2022, 03h36

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

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

Code :

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

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 HTML :

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

<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()

**Archimède** · 09/01/2022, 16h03

Salut ton id est mondiv et tu fais

Code :

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

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

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

Code :

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

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...

**Programir** · 10/01/2022, 09h09

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 html :

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

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 :

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

document.contener.corps.appendChild(newDiv);

Mais j'ai toujours la même erreur.

**NoSmoking** · 10/01/2022, 14h10

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 html :

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

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 :

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

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é

**Programir** · 10/01/2022, 14h39

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

**NoSmoking** · 10/01/2022, 15h03

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 !?!

Code :

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

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 ...

**Programir** · 10/01/2022, 18h09

ah oui, merci beaucoup !!!

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

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

JavaScript

Discussions similaires

Partager

Partager