Méthode createElement

La méthode createElement permet de créer un nouvel élément en passant en paramètre le nom de la balise. Après création, on peut travailler avec l'élément comme avec un élément normal, et on peut également l'ajouter à la page avec les méthodes prepend, append, appendChild, insertBefore ou insertAdjacentElement.

Si on enregistre le résultat de createElement dans une variable, cette variable contiendra un élément comme si nous l'avions obtenu via querySelector ou getElementById. La seule différence - notre élément ne sera pas placé sur la page. Sinon, nous pouvons modifier son innerHTML, ses attributs, attacher des gestionnaires d'événements et finalement le placer sur la page.

Syntaxe

document.createElement('nom de la balise');

Exemple

Créons un paragraphe, définissons son texte et plaçons-le sur la page à la fin du bloc #parent :

<div id="parent">
	<p>1</p>
	<p>2</p>
	<p>3</p>
</div>

let parent = document.querySelector('#parent');

let p = document.createElement('p');
p.textContent = '!';

parent.appendChild(p);

Résultat de l'exécution du code :

<div id="parent">
	<p>1</p>
	<p>2</p>
	<p>3</p>
	<p>!</p>
</div>

Exemple

Soit un ul. Plaçons-y 9 balises li, en faisant de leurs textes les numéros d'ordre :

<ul id="parent"></ul>

let parent = document.querySelector('#parent');

for (let i = 1; i <= 9; i++) {
	let li = document.createElement('li');
	li.textContent = i;
	parent.appendChild(li);
}

Résultat de l'exécution du code :

<ul id="parent">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
	<li>7</li>
	<li>8</li>
	<li>9</li>
</ul>

Exemple

Lors de l'insertion des éléments, attachons-leur des gestionnaires d'événements :

<ul id="parent"></ul>

let parent = document.querySelector('#parent');

for (let i = 1; i <= 9; i++) {
	let li = document.createElement('li');
	li.textContent = i;
	
	li.addEventListener('click', function() {
		alert(this.textContent);
	});
	
	parent.appendChild(li);
};

Voir aussi

la méthode cloneNode,
qui permet de cloner un élément
la méthode createTextNode,
qui permet de créer un nouveau nœud texte