communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > js tutoriel > Comment ajouter des éléments DOM en Javascript

Comment ajouter des éléments DOM en Javascript

autoload
Libérer： 2021-04-08 16:20:46
original
5021 Les gens l'ont consulté

Comment ajouter des éléments DOM en Javascript

Le contenu HTML est vide

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>php.cn</title>
</head>
<body>
</body>
</html>
Copier après la connexion

1. Créer un élément DOM 

 <script>     
       const ul=document.createElement("ul");
 </script>
Copier après la connexion

2. Ajouter du contenu dans DOM

  • <code><span style="font-size: 16px;">append()</span>append()Insérer le contenu spécifié à la fin de l'élément sélectionné

      <script>     
       const ul=document.createElement("ul");
        for(let i=1;i<=5;i++){
            const li=document.createElement("li");
            li.textContent=`item${i}`;
            ul.append(li);
        }
          document.body.append(ul);
 </script>
    Copier après la connexion

  • <span style="font-size: 16px;">prepend()</span> <span style="font-size: 16px;">prepend()</span>

    Ajouter le contenu spécifié à l'en-tête de l'élément sélectionné

 <script> 
        //append()创建一个列表
        const ul=document.createElement("ul");
        //循环来生成多个列表li
        for(let i=1;i<=5;i++){
            const li=document.createElement("li");
            li.textContent=`item${i}`;
            ul.append(li);
        }
        
        console.log(ul);
        
        //prepend()在头部添加li
        li=document.createElement("li");
        li.textContent="first item";
        li.style.color="red";
        ul.prepend(li);
        document.body.append(ul);
  </script>
Copier après la connexion
Recommandé : "Questions et réponses de l'entretien js 2021 (grand résumé )》

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!

Étiquettes associées：
javascript
source：php.cn
Article précédent：Que faire si le navigateur ne prend pas en charge JavaScript Article suivant：Comment convertir la date et l'heure en horodatage en javascript
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Le rembourrage du parent ignoré par l'enfant en position collante Comment empêcher les éléments collants de passer derrière le collecteur ? L'extrait de cod...
Depuis 2024-04-06 11:42:51
0
1
338
Les liens et boutons Highcahrts dans les info-bulles ne fonctionnent pas J'essaie de déclencher un événement de clic depuis une info-bulle. J'ai mis un bouton avec...
Depuis 2024-04-04 22:01:46
0
1
1352
json ajouté à MySQL Comment ajouter un nouvel élément à la variable json dans MySQL à partir de ceci : value=[...
Depuis 2024-04-04 19:17:30
0
1
352
La classe de lignes CSS fait sortir certains éléments du cadre, alors qu'ils devraient être statiques et fixés au bas de l'écran. Ma page ressemble actuellement à ceci. Après avoir ajouté la classe de lignes afin que les...
Depuis 2024-04-03 18:48:12
0
1
281
Attribuer des classes à l'élément cliqué le plus récemment J'ai un calendrier qui ressemble à ceci, stylisé en utilisant TailwindCSS : 8Wednesday est...
Depuis 2024-04-03 16:36:09
0
1
336
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal