Javascript createElement — необходимо обернуть входной текст классом div для форматирования css

const input = document.createElement('input');
input.type = 'checkbox';

Я могу создать флажок, используя приведенный выше код. Однако мне нужно обернуть его в класс div, чтобы мой css мог его отформатировать. Можно ли это сделать?

<div class = "kt-checkbox-list">
<label class = "kt-checkbox">
<input type='checkbox'/>
<span></span>
</label>
</div>

Ваш div уже существует в вашем HTML или вы также хотите создать его с помощью JS?

Nick Parsons 28.07.2019 00:43

Мне нужно создать его с помощью Js.

Snakins 28.07.2019 00:52
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
2
279
4
Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Ответ принят как подходящий

В чистом JS это довольно просто, просто создайте теги div и label с соответствующими классами:

const div = document.createElement("div");
div.class = "kt-checkbox-list";
const label = document.createElement("label");
div.appendChild(label);
label.class = "kt-checkbox";
const input = document.createElement("input");
label.appendChild(input);
input.type = "checkbox";
document.body.appendChild(div);

Джек, спасибо за быстрый ответ, но ваш код по-прежнему не форматирует флажок.

Snakins 28.07.2019 01:02

Получил работу, используя атрибут set: ``` div.setAttribute("class", "kt-checkbox-list"); ```

Snakins 28.07.2019 01:50

Рад, что смог помочь @Snakins.

Jack Bashford 28.07.2019 01:58

Вы можете использовать что-то вроде этого:

<label id = "an-id" class = "kt-checkbox">

а потом

document.getElementById("an-id").innerHTML = "<input type='checkbox' />"; 

Вы можете просто создать строку HTML, а затем добавить ее в тело документа, используя document.body.innerHTML, например:

const html_str = `
<div class = "kt-checkbox-list">
  <label class = "kt-checkbox">
    <input type='checkbox'/>
    <span></span>
  </label>
</div>`;

document.body.innerHTML = html_str;

(Примечание: я использовал шаблонные литералы (`) для строки, поскольку это позволяет мне писать HTML в несколько строк. Обычная строка, заключенная в двойные или одинарные кавычки, также будет работать, но вам нужно более внимательно относиться к форматированию. это в вашем JS)

const input = document.createElement('input');
const list = document.createElement('div');
const label = document.createElement('label');
const span = document.createElement('span');

list.classList.add('kt-checkbox');
label.classList.add('kt-checkbox');
label.htmlFor= 'abc';
input.id = 'abc';
input.setAttribute('type', 'checkbox');

label.append(input, span)
list.append(label);
document.body.append(list);

ИЛИ

function createElement(type, attr, ...css) {
   const elem = document.createElement(type);
   attr  && attr.map(obj => Object.keys(obj).map(key => elem.setAttribute(key, obj[key])));
   elem.classList.add(...css);
   return elem;
}

const input = createElement('input', [{'type': 'checkbox'}, {'id': 'abc'}]);
const list = createElement('div', null, 'kt-checkbox-list');
const label = createElement('label', [{'htmlFor': 'abc'}], 'kt-checkbox');
const span = document.createElement('span');

label.append(input, span)
list.append(label);
document.body.append(list);

Другие вопросы по теме