如何在函数构造函数中使用标签

Question

出于学习目的，我正在尝试复制html页面布局。仅使用javascript。为此，我认为我将对html标签使用函数构造函数。由于它们会重复出现，因此我需要更改的只是其中的文字。该页面被3 div框划分为我要放置的所有框。我可以在控制台上看到它们，但不会在浏览器中显示。

我已经尝试将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控制台只显示body atm上的script标签，什么也没有显示。在此之前，它没有显示div标签，但其中没有任何内容。在chrome中记录NameH1时，它确实显示了您好世界文字。

我想重复使用标签并以适当的格式显示它们。文本标签有不同的用例，因此我可能在某个地方使用了错误的用例。我的主要目标是更好地掌握OOP

Answer 1

您的构造函数没有return语句，因此默认情况下它返回其this值，它是自身的新实例。 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块，这些块对于属性，属性，data- *属性，类，布尔值属性，侦听器等具有不同的逻辑（例如，上述非常有限的示例与属性和属性有关。

构建这样的功能是一种有用的学习经历，可发现HTML和DOM中的许多怪癖，特别是关于属性和特性的怪癖。但我认为最终这将成为兼容性和维护的噩梦。