Comment ajouter du code HTML à un div en utilisant JavaScript ?-js tutoriel-php.cn

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

王林

Libérer： 2023-09-06 12:09:02

avant

795 Les gens l'ont consulté

如何使用 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>';

Copier après la connexion

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>

Copier après la connexion

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>';
}

Copier après la connexion

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

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

Copier après la connexion

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>

Copier après la connexion

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!