Как добавить html элементы в создаваемый html элемент?

Question

[bzotsss]

Всем привет , как правильно реализовать такую логику ? Я создаю html эл. через document.createElement('div')
как мне создать ещё два или больше эл. и вставить их в создаваемый до этого элемент не плодя при этом переменных и не засоряя код ?

Comments

[Rerurk]

Создавайте необходимый класс, возвращайте, нужный объект

Answer 1

[Stalker_RED]

const div = document.createElement('div');
const b = document.createElement('b');
b.textContent = 'привет!';
div.appendChild(b);
/*
обратите внимание, сперва собираем всю начинку в div, и только потом вставляем в документ
наоборот тоже сработает, но при вставке может произойти перерисовка страницы,
и когда вставок много вы рискуете получить тормоза.
*/
document.body.appendChild(div);

// второй способ
const text = Еще привет!;
const htmlStr = `<div><b>${text}</b><div>`;
document.body.insertAdjacentHTML('beforeend', htmlStr);

Если фрагменты кода большие, то второй способ производительнее.

Comments

[bzotsss]

А есть какой нибудь вариант без создания других переменных ? ( таких как b ) .
Если допустим я хочу добавить 5 таких разных эл. например li,span,strong и тд..
Есть ли способ не создавать каждый раз новую переменную?

[bzotsss]

Спасибо !

[Stalker_RED]

bzotsss, а вам переменные по талонам отпускают?
Оберните все в функцию типа

function insertGreeting(text, target) {
  const div = document.createElement('div');
  const b = document.createElement('b');
  b.textContent = text;
  div.appendChild(b);
  target.appendChild(div);
}

После ее выполенния переменные будут удалены.
Главное, чтобы код понятный был.

[edward_freedom]

bzotsss, https://qna.habr.com/answer?answer_id=1922507#answ...

Answer 2

[Yupiter7575]

div = document.createElement('div');
div2 = document.createElement('div');
div2.innerHTML = 'hello world';
div.innerHTML. = div2;
document.body.append(div);