Comment modifier le contenu des éléments html en js ? Implémentation HTML DOM pour modifier le contenu

青灯夜游

Libérer： 2018-10-09 14:22:23

original

18803 Les gens l'ont consulté

Comment modifier le contenu des éléments html avec js ? Ce chapitre vous présentera comment utiliser HTML DOM pour modifier le contenu des éléments HTML dans js. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Nous devons d’abord comprendre Qu’est-ce que HTML DOM ? Quel est le rôle du DOM HTML ?

HTML DOM, abréviation de Document Object Model. Lorsqu'une page Web est chargée, le navigateur crée le modèle objet de document de la page. Le

modèle HTML DOM peut être construit comme un arbre de objets. Comme indiqué ci-dessous :

Comment modifier le contenu des éléments html en js ? Implémentation HTML DOM pour modifier le contenu

Grâce au DOM HTML, tous les éléments du document HTML JavaScript sont accessibles et des capacités suffisantes peuvent être obtenues pour créer du HTML dynamique. Grâce au HTML DOM, JavaScript peut réaliser les fonctions suivantes :

js peut modifier tous les éléments HTML de la page
; js peut modifier tous les attributs HTML de la page
js peut modifier tous les styles CSS de la page
js peut réagir à tous les événements de la page.

Présentons en détail comment js modifie le contenu des éléments html via HTML DOM :

1. Modification JS et ajout de contenu html<.>

js peut créer et ajouter du contenu HTML dynamique. Utilisez la méthode write() pour écrire des expressions HTML ou du code JavaScript directement dans des documents HTML.

Plusieurs paramètres (exp1, exp2, exp3,...) peuvent être répertoriés dans la méthode write(), et ils seront ajoutés au document dans l'ordre.

Syntaxe :

document.write(exp1,exp2,exp3,....)

Copier après la connexion

Description :

Bien que selon le standard DOM, la méthode write() n'accepte qu'une seule chaîne comme paramètre. Cependant, write() peut accepter n'importe quel nombre de paramètres.

Nous utilisons généralement la méthode write() des deux manières suivantes :

1 Lorsque vous utilisez cette méthode pour afficher du HTML dans le document

2. Créez un nouveau document dans une fenêtre ou un cadre autre que la fenêtre. Remarque : Dans cette méthode, veillez à utiliser la méthode close() pour fermer le document.

Exemple :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script type="text/javascript">
			document.write("<p>Hello World!</p> ","现在是：",Date());
		</script>
	</head>
</html>

Copier après la connexion

Rendu :

Comment modifier le contenu des éléments html en js ? Implémentation HTML DOM pour modifier le contenu

2.js modifier et remplacer le contenu des éléments html

Le moyen le plus simple et le plus direct pour js de modifier et de remplacer le contenu des éléments HTML est d'utiliser l'attribut innerHTML.

Syntaxe :

document.getElementById(id).innerHTML=new HTML

Copier après la connexion

document.getElementById(id) consiste à rechercher et à obtenir l'élément HTML dont le contenu doit être modifié et remplacé par id, puis à utiliser l'attribut innerHTML pour modifier le contenu de l'élément html remplacé.

Exemple (modification du contenu de l'élément

) :

<!DOCTYPE html>
<html>
<body>

<h1 id="header">Old Header</h1>

<script>
var element=document.getElementById("header");
element.innerHTML="New Header";
</script>

<p>"Old Header" 已被修改为 "New Header"。</p>

</body>
</html>

Copier après la connexion

Rendu :

Comment modifier le contenu des éléments html en js ? Implémentation HTML DOM pour modifier le contenu

Description :

Le document HTML de l'exemple contient l'élément

avec id="header";

Nous utilisons HTML DOM pour rechercher et obtenir l'élément

;

En utilisant l'attribut innerHTML, vous pouvez réparer et remplacer tout le contenu de l'élément html

.

Résumé : Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun. Pour plus de didacticiels connexes, veuillez visiter le

Tutoriel vidéo JavaScript !

Recommandations associées :

Tutoriel vidéo de formation php public

Tutoriel graphique JavaScript

Manuel JavaScript en ligne

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!