Maison > Article > interface Web > Comment ajouter du code HTML à un div en utilisant JavaScript ?

Comment ajouter du code HTML à un div en utilisant JavaScript ?

王林avant: 2023-09-06 12:09:02828parcourir

如何使用 JavaScript 将 HTML 代码附加到 div？

Pour ajouter du code HTML à un div à l'aide de JavaScript, nous devons d'abord sélectionner l'élément div. Nous pouvons le faire en utilisant la méthode document.getElementById() et en transmettant l'identifiant de l'élément div. Ensuite, nous utilisons la propriété innerHTML de l'élément div et la définissons égale au code HTML que nous voulons ajouter, précédé de l'opérateur +=.

Méthode

Une façon d'ajouter du code HTML à un div à l'aide de JavaScript consiste à sélectionner le div à l'aide de son identifiant,

Ajoutez ensuite le code HTML requis à l'aide de l'attribut innerHTML. Par exemple -

var div = document.getElementById('myDiv');
div.innerHTML += '<p>This is some new HTML code</p>';

Explication

Dans cet exemple, nous utiliserons JavaScript pour ajouter du code HTML à un div.

Nous allons d'abord créer un élément div -

<div id="container"></div>

Ensuite, nous allons créer une fonction pour ajouter le code HTML à l'élément div -

function appendHtml() {
   var div = document.getElementById('container');
   div.innerHTML += '<p>This is some HTML code</p>';
}

Enfin, nous appellerons la fonction au chargement de la page -

window.onload = function() {
   appendHtml();
}

Exemple

<!DOCTYPE html>
<html>
<head>
   <title>Append HTML Code</title>
</head>
   <body>
      <div id='container'></div>
      <script>    
         function appendHtml() {
            var div = document.getElementById('container');
            div.innerHTML += '<p style="color:black">This is some HTML code</p>';
         }       
         window.onload = appendHtml;
      </script>
   </body>
</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!

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment ajouter un trait à un rectangle en utilisant FabricJS ?Article suivant：Comment ajouter un trait à un rectangle en utilisant FabricJS ?

Articles Liés

Voir plus