Comment ajouter des données à un élément en utilisant JavaScript ?-js tutoriel-php.cn

Comment ajouter des données à un élément en utilisant JavaScript ?

WBOY

Libérer： 2023-08-27 14:49:09

avant

797 Les gens l'ont consulté

如何使用 JavaScript 将数据附加到元素？

Nous pouvons utiliser JavaScript pour ajouter des données à un élément en ajoutant du contenu à l'élément à l'aide de l'attribut .innerHTML. Cela peut être fait en utilisant l'opérateur += pour ajouter un nouveau contenu au contenu existant dans . Nous pouvons également ajouter de nouveaux éléments enfants à l’aide de la méthode .appendChild().

est un élément de niveau bloc utilisé pour créer des sections ou des sections dans des documents HTML. Les éléments sont généralement utilisés pour regrouper des éléments, tels que des paragraphes, des titres ou des images. Les éléments peuvent également être utilisés pour styliser une partie d’un document, par exemple en ajoutant une couleur d’arrière-plan ou une bordure.

Méthode

Pour ajouter des données à un élément div à l'aide de JavaScript, vous devez d'abord sélectionner l'élément à l'aide d'un sélecteur, puis utiliser la méthode append() ou appendChild() pour ajouter les données à l'élément sélectionné.

Voici un exemple de la façon d'ajouter un élément de paragraphe à un élément div -

var div = document.querySelector('div');
var p = document.createElement('p');
p.textContent = 'This is some data that will be appended to the div element';
div.appendChild(p);

Copier après la connexion

Exemple

Supposons que vous ayez un div avec l'identifiant "content" -

<!DOCTYPE html>
<html>
<head>
   <title>Append Data to DIV</title>
</head>
   <body>
      <div id='content'>
         <p style='color:black;'>I existed before</p>
      </div>
      <script>
         var div = document.getElementById('content');
         var p = document.createElement('p');
         p.style.color = 'black';
         p.textContent = 'I was appended to the div';
         div.appendChild(p);
      </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!