Создать структуру элемента и добавить итоговые элементы внутрь тега

@Nas589 · Регистрация: 30.07.2021

Студворк — интернет-сервис помощи студентам

Вам дан HTML код.

Необходимо создать такую же структуру HTML-элемента через JavaScript и добавить итоговый элементы внутрь тега body.

Решите задачу 2-мя способами:
1) через innerHTML;
2) через document.createElement

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<form class="create-user-form">
       <label>
           Имя
           <input type="text" name="userName" placeholder="Введите ваше имя" />
       </label>
       <label>
           Пароль
           <input type="password" name="password" placeholder="Придумайте Пароль" />
       </label>
       <button type="submit">
           Подтвердить
       </button>
   </form>

@amr-now · 13.08.2021, 04:16

Здравствуйте.
innerHTML:

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <script>
        let str = `
        <form class="create-user-form">
            <label>
                Имя
                <input type="text" name="userName" placeholder="Введите ваше имя" />
            </label>
            <label>
                Пароль
                <input type="password" name="password" placeholder="Придумайте Пароль" />
            </label>
            <button type="submit">
                Подтвердить
            </button>
        </form>`;
        document.body.innerHTML += str;
    </script>
</body>
</html>

document.createElement:

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <script>
        let form = document.createElement("form"),
            label1 = document.createElement("label"),
            input1 = document.createElement("input"),
            label2 = document.createElement("label"),
            input2 = document.createElement("input"),
            button = document.createElement("button");
        form.classList = "create-user-form";
        label1.textContent = " Имя ";
        input1.type = "text";
        input1.name = "userName";
        input1.placeholder = "Введите ваше имя";
        label2.textContent = " Пароль ";
        input2.type = "password";
        input2.name = "password";
        input2.placeholder = "Придумайте Пароль";
        button.type = "submit";
        button.textContent = " Подтвердить ";
        label1.append(input1);
        label2.append(input2);
        // Пробелы между элементами нужны, потому что в исходном шаблоне были
        // и они разделяют элементы
        form.append(label1, " ", label2, " ", button);
        document.body.append(form);
    </script>
</body>
</html>

Самый лучший способ - компактный и производительный - insertAdjacentHTML:

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <script>
        let str = `
        <form class="create-user-form">
            <label>
                Имя
                <input type="text" name="userName" placeholder="Введите ваше имя" />
            </label>
            <label>
                Пароль
                <input type="password" name="password" placeholder="Придумайте Пароль" />
            </label>
            <button type="submit">
                Подтвердить
            </button>
        </form>`;
        document.body.insertAdjacentHTML("beforeend", str);
    </script>
</body>
</html>

@vviller959 · 14.04.2024, 17:31

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
document.body.innerHTML = `
       <form class="create-user-form">
       <label>
           Имя
           <input type="text" name="userName" placeholder="Введите ваше имя" />
       </label>
       <label>
           Пароль
           <input type="password" name="password" placeholder="Придумайте Пароль" />
       </label>
       <button type="submit">
           Подтвердить
       </button>
   </form>
`;

Добавлено через 23 минуты

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
document.body.innerHTML = `
       <form class="create-user-form">
       <label>
           Имя
           <input type="text" name="userName" placeholder="Введите ваше имя" />
       </label>
       <label>
           Пароль
           <input type="password" name="password" placeholder="Придумайте Пароль" />
       </label>
       <button type="submit">
           Подтвердить
       </button>
   </form>
`;

Добавлено через 2 минуты

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
const createInputWithLabel = (label, inputType, inputName, placeholder) => {
  const labelContainer = document.createElement("label");
  labelContainer.innerText = label;
 
  const inputElement = document.createElement("input");
  inputElement.type = inputType;
  inputElement.name = inputName;
  inputElement.placeholder = placeholder;
 
  labelContainer.append(inputElement);
 
  return labelContainer;
};
 
const formContainer = document.createElement("form");
formContainer.className = "create-user-form";
const userNameLabel = createInputWithLabel(
  "Имя",
  "text",
  "userName",
  "Введите ваше имя"
);
const passwordLabel = createInputWithLabel(
  "Пароль",
  "password",
  "password",
  "Придумайте Пароль"
);
const confirmButton = document.createElement("button");
confirmButton.type = "submit";
confirmButton.innerText = "Подтвердить";
 
formContainer.append(userNameLabel, passwordLabel, confirmButton);
document.body.prepend(formContainer);

Новые блоги и статьи Все статьи Все блоги /
Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro
Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .

Создать структуру элемента и добавить итоговые элементы внутрь тега

Решение