Maison > Article > interface Web > Comment ajouter des éléments DOM en Javascript

Comment ajouter des éléments DOM en Javascript

autoloadoriginal: 2021-04-08 16:20:464971parcourir

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>

1. Créer un élément DOM

 <script>     
       const ul=document.createElement("ul");
 </script>

2. Ajouter du contenu dans DOM

<code>append()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>

prepend() prepend()
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>

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!

Déclaration：

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

Article précédent：Que faire si le navigateur ne prend pas en charge JavaScriptArticle suivant：Que faire si le navigateur ne prend pas en charge JavaScript

Articles Liés

Voir plus