DOM HTML La méthode createElement() comment créer un nœud élément

.....

Définition et utilisation méthode createElement() 

JavaScript cours tutorial

La méthode createElement() crée un nœud élément du type spécifié avec le nom spécifié; Si l'élément possède des attributs par défaut dans un type de document donné, ces attributs lui sont automatiquement ajoutés.

Le nouveau nœud est inséré dans le document par un énoncé tel que insertBefore () ou appendChild() .

Appui de navigateur

Internet Explorer Firefox Opera Google Chrome Safari

La méthode createElement() est prise en charge dans tous les principaux navigateurs.

Syntaxe

document.createElement(nodename)

Paramètres

Paramètre Type Description
nodename String Obligatoire. Spécifie le nom de l”élément à créer comme p, img, div …

 Exemple Créer un bouton :

Sélectionner le code

  <!doctype html>
  <html lang="fr">
  <head>
           <meta charset="UTF-8">
           <title> Exemple créer un bouton avec la fonction createElement
  </title>
  </head>
  <body>
      <p id="demo">Clique le bouton pour créer l'élément.</p>
  <button onclick="myFunction()"> CRÉER </button>
  <script>
  function myFunction()
  {
  var btn=document.createElement("BUTTON");
  document.body.appendChild(btn);
  };
  </script>
  </body>
  </html>

 

Le résultat de ce code est un très petit bouton, il lui faut du texte.

Les éléments HTML contiennent souvent du texte. Pour créer un bouton avec du texte , vous devez également créer un nœud de texte que vous ajouter à l'élément bouton :

Exemple Créer un bouton avec du texte :

Sélectionner le code

  <!doctype html>
  <html lang="fr">
  <head>
           <meta charset="UTF-8">
           <title> Exemple créer un bouton avec du texte </title>
  </head>
  <body>
      <p id="demo">Clique le bouton pour créer l'élément.</p>
  <button onclick="myFunction()"> CRÉER </button>
  <script>
  function myFunction()
  {
  var btn=document.createElement("BUTTON");
  var t=document.createTextNode(" CLIQUEZ MOI ");
  btn.appendChild(t);
  document.body.appendChild(btn);
  };
  </script>
  </body>
  </html>

 
Par carabde 30 mars 2014

  • Trafic Booster
    hebergement web

    SCREEBER - Logiciel de copywriting

    SCREEBER - Logiciel de copywriting Augmentez vos résultats en rejoignant les 1600 entrepreneurs qui utilisent Screeber®, le seul logiciel de Copywriting (en français) qui rédige avec vous des textes de vente qui convertissent


    HTML5, CSS3, JavaScript pour débutants Tome 1
    HTML5, CSS3, JavaScript
    pour débutants Tome 1

    Premier tome d'une série vidéo dédiée à l'apprentissage des langages HTML, CSS et JavaScript.

    Regarder aussi nos cours :

    fonction stristr

    Version insensible la casse de strstr

    Faire une barre d’icones

    QU’est ce que Font awesome ? et comment créer une barre d’icones en utilisant font-awesome.

    La boucle for...in javascript

    La boucle for...in js : La boucle for... in peut exécuter des commandes à plusieurs reprises. La boucle for... in est couramment utilisée pour la manipulation d'objet.



    Rentabilisez efficacement votre site