Comment modifier le contenu HTML avec js

JavaScript est un langage de programmation largement utilisé qui peut être utilisé pour modifier le contenu HTML, changer les styles CSS, ajouter des effets dynamiques, traiter les entrées de l'utilisateur, etc. Cet article se concentrera sur la façon d'utiliser JavaScript pour modifier le contenu HTML.

1. Fonctionnement DOM

Dans DOM (Document Object Model), chaque élément HTML est traité comme un objet. Par conséquent, nous pouvons accéder et modifier les attributs des balises HTML via JavaScript.

1. Obtenir des éléments

Nous pouvons utiliser la méthode document.getElementById() pour obtenir l'élément avec l'identifiant spécifié, comme indiqué ci-dessous :

var myElement = document.getElementById("myId");

De même, nous pouvons également obtenir l'élément avec le nom de balise spécifié via getElementsByTagName (), comme suit Montré :

var myElements = document.getElementsByTagName("p");

2. Modifier le contenu de l'élément

Après avoir obtenu l'élément, nous pouvons modifier le contenu de l'élément via l'attribut innerHTML. Comme indiqué ci-dessous :

myElement.innerHTML = "新的内容";

Vous pouvez utiliser l'attribut innerHTML pour apporter de simples modifications au contenu du texte. Si vous devez modifier les attributs de l'élément lui-même, tels que l'identifiant ou la classe, vous devez utiliser la méthode JavaScript setAttribute().

3. Création d'un nouvel élément

Nous pouvons utiliser la méthode document.createElement() pour créer un nouvel élément HTML comme indiqué ci-dessous :

var newElement = document.createElement("p");

Le code ci-dessus crée une nouvelle balise p, mais cette balise n'a pas été ajoutée à dans la page Web. Nous devons ajouter des éléments via la méthode appendChild().

4. Insérer des éléments

Nous pouvons utiliser la méthode appendChild() pour insérer l'élément nouvellement créé dans l'élément HTML spécifié, ou nous pouvons utiliser la méthode insertBefore() pour insérer l'élément à la position spécifiée. Comme indiqué ci-dessous :

document.body.appendChild(newElement);   //将newElement添加到body元素中
document.body.insertBefore(newElement, nextSibling);   //将newElement插入到nextSibling元素之前

2. Fonctionnement de la bibliothèque jQuery

En plus des opérations DOM, nous pouvons également utiliser la bibliothèque jQuery pour modifier le contenu HTML. La bibliothèque jQuery est une bibliothèque spécialement conçue pour simplifier JavaScript, en l'utilisant pour faire fonctionner les éléments HTML plus rapidement et plus facilement.

1. Obtenir des éléments

Nous pouvons obtenir l'élément HTML spécifié via le sélecteur jQuery, comme indiqué ci-dessous :

var myElement = $("#myId");

2. Modifier le contenu de l'élément

Semblable aux opérations DOM, nous pouvons également modifier des éléments via html() contenu de la méthode, comme indiqué ci-dessous :

myElement.html("新的内容");

3. Créer un nouvel élément

Nous pouvons utiliser la méthode $() pour créer un nouvel élément HTML comme indiqué ci-dessous :

var newElement = $("<p></p>");

4. Insérer un élément

De même, nous pouvons utiliser The Les méthodes append() et before() insèrent l'élément nouvellement créé dans l'élément HTML spécifié, comme indiqué ci-dessous :

$("body").append(newElement);   //将newElement添加到body元素中
myElement.before(newElement);   //将newElement插入到myElement之前

3. Résumé

Cet article présente principalement comment JavaScript exploite le contenu HTML. Grâce à l'introduction de cet article, les lecteurs peuvent maîtriser le contenu suivant :

• Comprendre les opérations DOM (Document Object Model), maîtriser les méthodes d'obtention, de modification, de création et d'insertion d'éléments
• Comprendre les opérations de la bibliothèque jQuery, utiliser les sélecteurs, le html ; (), Des méthodes telles que $(), append() et before() exploitent des éléments HTML ;
• Maîtrisez les connaissances de base de JavaScript exploitant le HTML et jetez les bases du développement et de la pratique ultérieurs.

Enfin, les lecteurs doivent s'entraîner davantage. Ce n'est qu'en vous entraînant que vous pourrez mieux maîtriser la méthode d'utilisation de JavaScript pour faire fonctionner le HTML.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!