Как сделать из созданного ХТМЛ-элемента строку js

Question

Пробовал найти ответы в гугле, но результаты вечно не те, что нужны... Наверное, я не совсем правильно формулирую вопрос, поэтому обращаюсь к знатокам за помощью.

Итак, проблема следующая:

function status() {
      let a = [ 'Status',]
      let span = document.createElement('span')
      span.className = "text6"
      span.style = "color: red"
      span.innerText = 'Ruined'
      let span2 = String(span)
      console.log('span', span)
      console.log('span2', span2)
      for (var i = 0; i < 7; i++) {
        a.push('<span class="text6" style="color: red">Ruined</span>')
      }
      return a;
    },

Есть у меня небольшая функция, которая создает заполненные ХТМЛ-элементы с тегами и прочей необходимой атрибутикой, а затем формирует из них массив, на основе которого уже позже будет строится таблица... Но вот проблема: если я оформляю данный тег строкой и просто пушу эту строку в массив, то все прекрасно работает, но если я пытаюсь сделать createElement то в массив добавляется такая вот запись [object HTMLSpanElement]...

Как я понимаю, проблема в том, что я создал элемент для добаления в DOM-дерево, а не строку... Я пытался преобразовать полученное значение в строку, но это тоже не помогло (переменная span2)...

Итак вопрос, как сделать так, чтобы результат выполнения a.push(span) был таким же, как в a.push('<span class="text6" style="color: red">Ruined</span>')? Надеюсь, я понятно изложил свою мысль.

Answer 1

Свойство .innerText при установке приводит аргумент к строке, так как передается элемент span, его строковая форма выглядит как [object HTMLSpanElement]

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

let span = document.createElement('span')
span.className = "text6"
span.style = "color: red"
span.innerText = 'Ruined'

var html = span.outerHTML;

console.log(html);

БЛОГ НА HUSL

Как сделать из созданного ХТМЛ-элемента строку js

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