Как добавить элемент внутри элемента? (ES6)

Я пытаюсь добавить элемент, используя:

let el = `<div></div>`;
document.body.appendChild(el);

Я заметил, что el отображается как «строка» в console.info. Должен ли я вместо этого добавлять элемент через createElement?

код:

let topPos = (Math.random() * 100) + '%'
let leftPos = (Math.random() * 100) + '%'
let bubbleMd = `
    <div class = "bubble bubble-md"></div>
`;
let layer = document.getElementsByClassName('layer3')

layer.appendChild(bubbleMd).setAttribute(
    'style',`top: ${topPos}; left: ${leftPos};`
);

javascript html ecmascript-6

28.07.2019 04:41

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

а) да, вам нужно использовать createElement, потому что appendChild ожидает HTMLElement, а не строку, б) слой - это список узлов, поэтому у него нет метода appendChild

Так:

let topPos = (Math.random() * 100) + '%'
let leftPos = (Math.random() * 100) + '%'
let bubbleMd = createElemnt('div');
bubbleMd.classList.add('bubble', 'bubble-md');
bubbleMd.style=`top: ${topPos}; left: ${leftPos};`;
let layer = document.getElementsByClassName('layer3')[0]; // note the [0]
layer.appendChild(bubbleMd);

Так что я использовал document.createElement, и теперь я получаю TypeError: Cannot read property 'appendChild' of undefined. Когда я запускаю console.info, я получаю следующее: bubbleMd: [object HTMLDivElement] layer3: undefined

— 28.07.2019 19:48

что выводит console.info(document.getElementsByClassName('layer3').length‌)?

— 28.07.2019 23:24

console.info(document.getElementsByClassName('layer3').length‌) выходы 0

— 28.07.2019 23:40

так что это ваша проблема - я не могу исправить это в своем ответе, поскольку а) вы никогда не упоминали об этом в вопросе и б) вы не показывали HTML: p

— 29.07.2019 01:34

28.07.2019 04:57