Как создать элемент динамически на HTML-странице с помощью JavaScript? - PullRequest
Новая
       52

Как создать элемент динамически на HTML-странице с помощью JavaScript?

0 голосов
/ 08 июня 2019

Я учусь динамически создавать элемент на html-странице, используя javascript. В этом коде я пытаюсь создать простой «h6» внутри «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>

Ответы [ 4 ]

1 голос
/ 08 июня 2019

в вашем коде есть две ошибки: во-первых, вы использовали неверное «id» имени div-1 вместо div1, innerText не является функцией

это код после исправления :)

<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 голосов
/ 08 июня 2019

Установить текстовое содержимое узла: node.innerText = text 

function constructElement(){
    var elem = document.createElement("h6");
    elem.innerText ="Dynamically added text."
    document.getElementById("div-1").appendChild(elem);
}
0 голосов
/ 08 июня 2019 
<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 голосов
/ 08 июня 2019

Это прямо не ваш ответ, но алгоритм очень похож

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

(Для части модальностей, пожалуйста, добавьте свои элементы)

Если вам нужны дополнительные разъяснения, не стесняйтесь спрашивать, поскольку это не ваш прямой ответ

Также извините, но вопрос является дубликатом - Динамическое создание элементов HTML с использованием Javascript?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...