Maison > Article > interface Web > Méthode JavaScript pour créer des éléments (code)

Méthode JavaScript pour créer des éléments (code)

不言avant: 2019-03-20 11:32:442416parcourir

Le contenu de cet article concerne la méthode (code) de création d'éléments en JavaScript. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

1. Créez dynamiquement l'élément un document.write()

Par exemple, affichez une balise li sur la page

<pre class="html" name="code"><span style="font-size:12px;"><script>
  document.write("<li>123</li>");</script></span>

sera inséré dans la balise body, mais cette méthode est rarement utilisée car elle affecte la mise en page de la page et peut même effacer le contenu original de la page, affichant ainsi uniquement le contenu de sortie

2. Créez dynamiquement l'élément 2 innerHTML

<span style="font-size:12px;"><body>
<div id="box"></div>
<script>
  var box = document.getElementById("box");
  box.innerHTML = "<p>这是p标签</p>";
</script>
</body></span>

Une balise p sera insérée dans la balise div et "Ceci est une balise" sera affiché sur la page. Lorsqu'il y a plus de balises à ajouter, utilisez cette méthode.

3. Créez dynamiquement l'élément trois document.createElement()

<span style="font-size:12px;"><body>
<div id="div"></div>
<script>
  var divobj = document.getElementById("div"); var li = document.createElement("li"); //创建一个li标签 li.innerHTML = "123"; //给li标签赋值
divobj.appendChild(li); //将创建好的li标签追加到box标签中 </script> </body></span>

Une balise li sera créée sous la balise div, qui doit être créé dynamiquement Utilisez cette méthode lorsqu'il y a relativement peu de balises

Cet article est terminé ici Pour un contenu plus passionnant, vous pouvez prêter attention à la Vidéo du didacticiel JavaScript sur le site Web PHP chinoisChronique !

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!

php JavaScript li

Déclaration：

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

Article précédent：Introduction aux points de connaissances en export et export default (avec exemples)Article suivant：Introduction aux points de connaissances en export et export default (avec exemples)

Articles Liés

Voir plus