JavaScript - как создать хорошо структурированные элементы с appendChild? - PullRequest
Новая
       14

JavaScript - как создать хорошо структурированные элементы с appendChild?

0 голосов
/ 14 февраля 2019

Я пытаюсь сделать простую игру палача, и я использую JavaScript для генерации слова, затем сопоставляю буквы, создаю и визуализирую элемент для каждого, например так: 

function createLetter(L) {
  const NEW_LETTER = document.createElement("span");
  const LETTER_DISPLAY = document.createElement("p");
  const LETTER_VAL = document.createTextNode(L);
  NEW_LETTER.classList.add("letter");
  LETTER_DISPLAY.classList.add("letter-display");
  LETTER_DISPLAY.appendChild(LETTER_VAL);
  NEW_LETTER.appendChild(LETTER_DISPLAY);
  console.log(document.getElementById("word"));
  renderLetter(NEW_LETTER);
}

function renderLetter(L) {
  document.getElementById("word").appendChild(L);
}

результат в порядке, но элемент (ы) HTML-разметки представлен в виде одной строки: 

  <span class="letter"><p class="letter-display">R</p></span><span class="letter"><p class="letter-display">R</p></span>

Но мне нужно, чтобы он был похож на любой из этих двух: 

<div id="word">
  <span class="letter">
    <p class="letter-display"></p>
  </span>
  <span class="letter">
    <p class="letter-display">A</p>
  </span>
  <span class="letter">
    <p class="letter-display">T</p>
  </span>
                    // or
  <span class="letter"><p class="letter-display">H</p></span>
  <span class="letter"><p class="letter-display">I</p></span>

Причинав то время как промежутки располагаются рядом друг с другом, между буквами нет разрыва, но когда они находятся в новых строках разметки, они имеют правильный интервал:

Вот CodePen.Два "R" справа - неправильный интервал.

Я знаю, что могу решить проблему с запасом, я просто спрашиваю, потому что я хотел бы понять, как я мог бы структурировать зановоправильно созданных элементов в будущем (хотя в следующий раз я думаю, что буду использовать React):)

...