0
votes

Comment créer un élément de manière dynamique dans une page HTML à l'aide de JavaScript?

J'apprends à créer un élément de manière dynamique dans une page HTML utilisant JavaScript. Dans ce code, j'essaie de créer un simple "H6" à l'intérieur "DIV-1".

<!DOCTYPE html>
    <header>
        <meta charset="utf-8">
    </header>
    <body>
        <button onclick="constructElement()">click</button>
        <div id="div-1"></div>

        <script>
            function constructElement(){
                var elem = document.createElement("h6");
                elem.innerText("Dynamically added text.")
                document.getElementById("div-1").appendChild(elem);
            }
        </script>
    </body>
</html>

javascript html element dynamic creation

1 commentaires

Dupliqué possible de créer de manière dynamique des éléments HTML utilisant JavaScript?

4 Réponses :

0
votes

Ceci n'est directement pas votre réponse, mais l'algorithme est très similaire

https://stackoverflow.com/a/56489422/10941112

(pour la partie des modaux, veuillez mettre vos propres éléments)

Si vous auriez besoin d'une clarification supplémentaire, n'hésitez pas à poser car ce n'est pas votre réponse directe

Aussi désolé de dire mais la question est une duplication de - Création de manière dynamique des éléments HTML à l'aide de JavaScript?

0 commentaires

0
votes

<header>
    <meta charset="utf-8">
</header>

<body>

    <button onclick="constructElement()">click</button>

    <div id="div-1">

    </div>

    <script>

            function constructElement(){
                var elem = document.createElement("h6");
                elem.innerText= "Dynamically added text.";
                document.getElementById("div-1").appendChild(elem);
            }
    </script>
</body>

0 commentaires

1
votes

Il y a deux erreurs dans votre code Le premier est que vous avez utilisé la mauvaise "ID" Nom DIV-1 au lieu de DIV1 En outre, Innertext n'est pas une fonction

Ceci est le code après le correctif :) p>

<header>
  <meta charset="utf-8">
</header>

<body>

  <button onclick="constructElement()">click</button>

  <div id="div-1">

  </div>

  <script>
    function constructElement() {
      var elem = document.createElement("h6");
      elem.innerText = "Dynamically added text."
      document.getElementById("div-1").appendChild(elem);
    }
  </script>
</body>

1 commentaires

J'ai utilisé l'identifiant correct mais j'ai gâché à la partie "Innertext". Merci pour la réponse cependant. Je comprends mon erreur maintenant :)

0
votes

Définir le contenu du texte d'un nœud: nœud.innertext = texte xxx

0 commentaires