object DocumentFragment] вместо разметки

Question

При нажатии на div - сменить тему вместо создания внутри этого дива двух кнопок с названиями тем, появляется строчка [object DocumentFragment]. Что делать?

    // theme

    arrOfTheme = ['light', 'dark'];

    // UI

    const buttonTheme = document.getElementById('toggleTheme');


    // Events

    buttonTheme.addEventListener('click', transformMenu);


    // Functions

    function transformMenu(e) {
        e.stopPropagation;
        const fragment = document.createDocumentFragment();

        arrOfTheme.forEach(theme => {
            const newTheme = document.createElement('button');
            newTheme.classList.add(theme);
            newTheme.textContent = theme;

            fragment.appendChild(newTheme);
        });

        buttonTheme.innerHTML = fragment;
    }

.toggle-theme {
    position: absolute;
    bottom: 30px;
    right: 30px;
}

.toggle-theme div {
    background-color: rgb(255, 255, 255);
    border: 1px solid grey;
    padding: 7px 14px;
    border-radius: 15px;
    transition: background-color 0.2s ease-in-out;
    -moz-user-select: none;
    -khtml-user-select: none;
    user-select: none;
    cursor: pointer;
    outline: none;
}

.toggle-theme div:hover {
    background-color: grey;
}

<!DOCTYPE html>
<html lang="ru">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>!</title>
</head>

<body>
<div class="toggle-theme">
    <div id="toggleTheme">Сменить тему</div>
</div>
</body>

</html>

Answer 1

fragmend - это специальный html элемент, поэтому вставлять его надо как элемент, например с помощью appendChild

// theme

arrOfTheme = ['light', 'dark'];

// UI

const buttonTheme = document.getElementById('toggleTheme');


// Events

buttonTheme.addEventListener('click', transformMenu);


// Functions

function transformMenu(e) {
  e.stopPropagation;
  buttonTheme.innerHTML = '';
  const fragment = arrOfTheme.reduce((fragment, theme) => {
    const newTheme = document.createElement('button');
    newTheme.classList.add(theme);
    newTheme.textContent = theme;

    fragment.appendChild(newTheme);
    return fragment;
  }, document.createDocumentFragment());

  buttonTheme.appendChild(fragment);
}

.toggle-theme {
  position: absolute;
  bottom: 30px;
  right: 30px;
}

.toggle-theme div {
  background-color: rgb(255, 255, 255);
  border: 1px solid grey;
  padding: 7px 14px;
  border-radius: 15px;
  transition: background-color 0.2s ease-in-out;
  -moz-user-select: none;
  -khtml-user-select: none;
  user-select: none;
  cursor: pointer;
  outline: none;
}

.toggle-theme div:hover {
  background-color: grey;
}

<div class="toggle-theme">
  <div id="toggleTheme">Сменить тему</div>
</div>

БЛОГ НА HUSL

object DocumentFragment] вместо разметки

Ответы (1 шт):