Как использовать теги с конструкторами функций

Question

В учебных целях я пытаюсь скопировать HTML-макет страницы. только с javascript. Для этого я решил использовать конструкторы функций для тегов HTML. Так как они будут повторяться, и все, что мне нужно изменить, это текст в нем. Страница разделена на 3 блока, в которые я хочу поместить все это. Я вижу их на консоли, но они не отображаются в браузере.

Я попытался поменять innerText на createTextNode, но не уверен, что текстовый узел делает по сравнению с другими текстовыми методами. Также попробовал несколько разных способов его организации, но я новичок, так что это было просто неправильно.

//one of three container used for layout of elements.
let topContainer = document.createElement('div')

//Function constructor for the h1
let NameH1 = function (text) {
    this.text = text;
    var typeH = document.createElement('h1')
    typeH.innerText = `${this.text}`;
    }

//input for first headline
var firstText = new NameH1('Hello world!')

//adding text to container and then container to the page.
topContainer.appendChild(firstText)
document.body.appendChild(topContainer);

Консоль chrome ничего не показывает, кроме тега script на теле atm. До этого он показывал теги div, но ничего внутри. При регистрации NameH1 в Chrome он показывает текст hello world.

Я хочу повторно использовать теги и отображать их в правильном формате. Существуют разные варианты использования текстового тега, поэтому я мог бы использовать где-то не тотМоя главная цель - лучше овладеть ООП

Answer 1

Ваш конструктор не имеет оператора return, поэтому по умолчанию он возвращает это значение, которое является его новым экземпляром. Элемент, созданный createElement , оставлен для сборки мусора.

Возможно, что вы хотели сделать, это что-то вроде:

let topContainer = document.createElement('div')

// H1 constructor
function NameH1(text) {
  let typeH = document.createElement('h1');
  typeH.innerText = text;
  return typeH;
}

let firstText = new NameH1('Hello world!');
topContainer.appendChild(firstText);
document.body.appendChild(topContainer);

Использование конструктора таким способом несколько бесполезно, поскольку он не использует никаких специальных свойств конструктора и просто означает больше ввода с помощью new .

Рассмотрим вместо этого универсальную функцию, которая принимает тег и параметры для добавления в качестве атрибутов, например

function genElement(tagName, options) {
  let props = ['textContent','innerHTML'];
  let el = document.createElement(tagName);

  Object.keys(options).forEach(key => {
    // Add properties
    if (props.includes(key)) {
      el[key] = options[key];
    // Add attributes
    } else {
      el.setAttribute(key, options[key]);
    }
  });
  return el;
}

let h1 = genElement('h1',{id: 'h0', textContent: 'Hello World!'});

console.log(h1.outerHTML);
document.getElementById('d0').appendChild(h1);

<div id="d0"></div>

Однако вы можете быстро получить множество if..else блоков с различной логикой для атрибутов, свойств, данных- * атрибутов, классы, логические атрибуты, слушатели и т. д. (например, как приведенный выше очень ограниченный пример со свойствами и атрибутами).

Создание такой функции - полезный опыт обучения, позволяющий обнаружить многие из особенностей HTML иDOM, особенно в отношении атрибутов и свойств. Но я думаю, что со временем это станет кошмаром по совместимости и обслуживанию.