Tutoriel de base JavaScript

Objet JavaScript

Fonction JavaScript

HTML DOM JS

BOM du navigateur JS

Tutoriel de base AJAX

Manuel de référence JavaScript

Changement du CSS avec JS DOM Sélecteurs JS HTML DOM

Changement du contenu HTML avec JS DOM

HTML DOM permet à JavaScript de récupérer et de modifier le contenu des éléments HTML.

Modifier le contenu HTML

Le moyen le plus simple de modifier le contenu d'un élément HTML est d'utiliserinnerHTMLpropriété.

Pour modifier le contenu d'un élément HTML, utilisez la syntaxe suivante :

element.innerHTML = text

L'exemple suivant utiliseid="para" changer<p>Le contenu de l'élément :

Exemple

<!DOCTYPE html>
<html>
<p id="para"></p>
<script>
document.getElementById("para").innerHTML = "Bonjour le monde";
</script>
</html>

Testez et voyez‹/›

Voici un exempleobtenirid="para"de<p>Le contenu de l'élément :

Exemple

<!DOCTYPE html>
<html>
<p id="para">Ceci est un paragraphe.</p>
<p id="result"></p>
<script>
var x = document.getElementById("para").innerHTML;
document.getElementById("result").innerHTML = x;
</script>
</html>

Testez et voyez‹/›

modifier le flux de sortie

document.write()La méthode écrit une chaîne de texte dans le flux du document.

Exemple

<!DOCTYPE html>
<html>
<p>La méthode document.write() écrit une chaîne de texte dans le flux de sortie du document :</p>
<script>
document.write(new Date());
</script>
</html>

Testez et voyez‹/›

Cette méthode écrit le contenu uniquement lorsque le document est analysé.

Si vous utilisez cette méthode après le chargement de la page, elle remplacera tout le contenu existant du document.

Exemple

<button onclick="myFunc()">Cliquez-moi</button>
<script>
function myFunc() {
　　document.write(new Date());
}
</script>

Testez et voyez‹/›

Changer la valeur de la propriété

Pour changer la valeur d'une propriété HTML, utilisez la syntaxe suivante :

element.attribute = new value

Voici un exemplechanger<img>de l'élémentsrcla valeur de l'attribut :

Cliquez sur le bouton pour changer l'avatar :

Voici un exempleobtenirde l'élément de type ancragehrefla valeur de l'attribut :

Exemple

var x = document.getElementById("demo").href;

Testez et voyez‹/›

ajouter de nouveaux éléments au DOM

Vous pouvez utiliserdocument.createElement()La méthode crée explicitement de nouveaux éléments dans un document HTML.

Cette méthode crée un nouvel élément, mais ne le ajoute pas au DOM. Vous devez effectuer cette opération dans une étape distincte :

　　//　Créez un nouveau h3élément
　　var　newElem　=　document.createElement("h3");
　　//　et lui donner un contenu
　　var newContent = document.createTextNode("Bonjour, tout le monde!");

appendChild()La méthode ajoute l'élément nouveau à n'importe quel autre sous-élément du noeud parent spécifiéà la fin.

Exemple

//　Ajoutez un nœud de texte à l'h3
newElem.appendChild(newContent);　　
//　Ajouter l'élément créé récemment et son contenu au DOM
document.body.appendChild(newElem);

Testez et voyez‹/›

Mais, si l'on veut ajouter à d'autres élémentsde débutPour ajouter un nouvel élément, vous pouvez utiliserinsertBefore()méthode.

Exemple

//Créez un nouveau h3élément
var　newElem　=　document.createElement("h3");
//　Donnez-lui un contenu
var　newContent　=　document.createTextNode("Hi　there　and　greetings!");
//　Ajoutez un nœud de texte à l'h3
newElem.appendChild(newContent);　　
//　Obtenir le Corps
var　body　=　document.body;
//　Insertion H3　avant le premier enfant du BODY
body.insertBefore(newElem,　body.childNodes[0]);

Testez et voyez‹/›

Pour supprimer un élément existant du DOM

De même, vous pouvez utiliserremoveChild()La méthode supprime un sous-élément du DOM.

Exemple

var　div　=　document.getElementById("demo");
div.removeChild(div.firstElementChild);

Testez et voyez‹/›

Changement du CSS avec JS DOM Sélecteurs JS HTML DOM