使用原型javascript设置标题样式

我正在尝试使用prototype创建H2标题，以便可以根据需要单独设置

我正在使用这个.appendChilddocument.createTextNode；将文本添加到H2。我需要在appendChild之前使用parent节点，我相信在本例中它是this关键字，但我不确定它是否被识别为父节点，或者它是否真的是父节点？我还不确定如何通过构造函数本身的参数添加文本。我使用了一个变量“font”，但不知道如何使它工作，因为它没有添加css样式

我正在学习如何使用原型，所以如果有任何其他明显的错误我错过了，请让我知道

<div id='body'>
<div id='inner'>div here</div>
</div>
<script>
Heading.prototype.font;
Heading.prototype.color;
Heading.prototype.fontSize;
Heading.prototype.headingTxt;
Heading.prototype.setHeading = function() {

   var inner = document.getElementById('inner');
   this.headingTxt = document.createElement('h2');
   this.headingTxt.font = this.appendChild(document.createTextNode(''));
   this.headingTxt.style.color = this.color;
   this.headingTxt.style.fontSize = this.fontSize;
inner.appendChild(headingTxt);
}

function Heading(font, color, fontSize) {

   this.font = font;
   this.color = color;
   this.fontSize = fontSize;
}

var title = new Heading('heading here', 'red', 20);
title.setHeading();

</script>

---

有人能帮我解决这个问题吗？

这里有一个工作版本，我已经详细介绍了：

function Heading(font, color, fontSize) {
   this.font = font;
   this.color = color;
   this.fontSize = fontSize;
}

Heading.prototype.setHeading = function() {
   var inner = document.getElementById('header'); //make sure inner exists
   this.headingTxt = document.createElement('h2'); //you could also scope this to be local with var if you want it to be private 
   inner.appendChild(this.headingTxt);
}

var title = new Heading('heading here', 'red');
title.setHeading();

---

如果您确实需要重用实例，那么使用原型是正确的。但理想情况下，您以后会有更多的工作要做，比如稍后更改值：

(function (window, undefined) {

    window.Heading = (function () {

        var Heading = function (text, fontColor, fontSize, element) {

            // Re-enforce instance
            if (!(this instanceof Heading))
                return new Heading(text, fontColor, fontSize, element);

            // Validate Element. element can be null
            element = (element.nodeType) ? element : null;

            // Get first H2 element in the page if not element is informed
            if (element === null) {

                var h2 = window.document.getElementsByTagName('H2');

                if (h2.length)
                    // Get first H2 element from the page
                    element = h2[0];

            } else if (element.nodeType !== 1)

                // Validate if this is an Element
                throw new Error('Only Element type is accepted.');

            this._element = element;
            this._fontColor = fontColor;
            this._fontSize = fontSize;
            this._text = text;
        };

        Heading.prototype.set = function () {

            var propertyName = (this._element.textContent) ? 'textContent' : 'innerText';

            this._element[propertyName] = this._text;
            this._element.style.fontSize = this._fontSize;
            this._element.style.color = this._fontColor;

            return this;
        };

        Heading.prototype.values = function (text, fontColor, fontSize) {

            this._fontColor = fontColor;
            this._fontSize = fontSize;
            this._text = text;

            return this;
        };

        return Heading;

    })();

})(window);

// Example
var instance = Heading('First exmaple', 'red', '20px');

// Set
instance.set();

// Re-use
instance.values('Second example', 'blue').set();

如果不需要重新使用实例，则可以使用简单的函数

var Heading = function (text, fontColor, fontSize, element) {

    // Validate Element. element can be null
    element = (element.nodeType) ? element : null;

    // Get first H2 element in the page if not element is informed
    if (element === null) {

        var h2 = window.document.getElementsByTagName('H2');

        if (h2.length)
            // Get first H2 element from the page
            element = h2[0];

    } else if (element.nodeType !== 1)

        // Validate if this is an Element
        throw new Error('Only Element type is accepted.');

    var propertyName = (element.textContent) ? 'textContent' : 'innerText';

    element[propertyName] = text;
    element.style.fontSize = fontSize;
    element.style.color = fontColor;
};

哪个父节点？这是指Heading的一个实例，即title，而不是DOM元素。啊，显然使用它是错误的。我希望它引用正在创建的H2元素作为父元素，因此文本节点将是子元素。