修改 function 内的 DOM 元素

Question

I have this task. Using the knowledge about the Factory method pattern, implement the SectionCreator factory which allows to create (create(type) method) two types of programs:

• Standard .The standard type creates a program implemented using a mockup.
• Advanced .The advanced type does the same but its title text is Join Our Advanced Program and the submit button text is Subscribe to Advanced Program. The created programs should have the remove() method to remove the created section from the page.

I created a join-us-section.js where i have this code:

function addSection() {

    function elCreating(elName, htmlEl, elClass, elID) {
        elName = document.createElement(htmlEl);
        elName.className = elClass;
        elName.id = elID;

        return elName;
    }

    function getElbyID(elName, searchedId) {
        elName = document.getElementById(searchedId);

        return elName;
    }

    function setAttributes(elem) {
        for (var i = 1; i < arguments.length; i += 2) {
            elem.setAttribute(arguments[i], arguments[i + 1]);
        }
    }

    let sectionFour = elCreating("sectionFour", "section", "app-section app-section--image-program", "fourth-section");
    let sectionParent = getElbyID("sectionParent", "third-section");
    let parentSection = sectionParent.parentNode;
    parentSection.insertBefore(sectionFour, sectionParent.nextSibling);

    let heading2 = elCreating("heading2", "h2", "program-title");
    let heading2Text = document.createTextNode("Join Our Program");
    heading2.append(heading2Text);
    let parent = getElbyID("parent", "fourth-section");

    let heading3 = elCreating("heading3", "h3", "program-subtitle");
    let heading3Text = document.createTextNode("Sed do eiusmod tempor incididunt");
    heading3.appendChild(heading3Text);
    let linebreak = elCreating("linebreak", "br");
    heading3.appendChild(linebreak);
    heading3Text = document.createTextNode("ut labore et dolore magna aliqua");
    heading3.appendChild(heading3Text);

    let submitFieldWrapper = elCreating("submitFieldWrapper", "form", "submitFieldWrapper");
    parent.append(heading2, heading3, submitFieldWrapper);

    let emailForm = elCreating("emailForm", "div", "form-wrapper");

    let inputForm = elCreating("inputForm", "input", "form-input", "submit-info");
    setAttributes(inputForm,
        "type", "text",
        "placeholder", "Email");
    emailForm.appendChild(inputForm);

    document.querySelector("form").addEventListener("submit", function (e) {
        e.preventDefault();
        console.log(inputForm.value);
    });

    let submitForm = elCreating("submitForm", "input", "app-section__button submit-btn");
    setAttributes(submitForm,
        "type", "submit",
        "value", "Subscribe");
    submitFieldWrapper.append(emailForm, submitForm);

}
export default addSection;

And main.js I have this:

import addSection from "./join-us-section.js";

window.onload = addSection;

var SectionCreatorFactory = function () {
    this.createType = function (type) {
        var sectionType;
        if (type === "standard") {
            addSection();
            removeElement("fourth-section");
        } else if (type === "advanced") {
            let sectionFour = elCreating("sectionFour", "section", "app-section app-section--image-program", "fifth-section");
            let sectionParent2 = getElbyID("sectionParent2", "third-section");
            let parentSection = sectionParent.parentNode;
            parentSection.insertBefore(sectionFour, sectionParent.nextSibling);

            let heading2 = elCreating("heading2", "h2", "program-title");
            let heading2Text = document.createTextNode("Join Our Advanced Program");
            heading2.append(heading2Text);
            let parent = getElbyID("parent", "fifth-section");

            let heading3 = elCreating("heading3", "h3", "program-subtitle");
            let heading3Text = document.createTextNode("Sed do eiusmod tempor incididunt");
            heading3.appendChild(heading3Text);
            let linebreak = elCreating("linebreak", "br");
            heading3.appendChild(linebreak);
            heading3Text = document.createTextNode("ut labore et dolore magna aliqua");
            heading3.appendChild(heading3Text);

            let submitFieldWrapper = elCreating("submitFieldWrapper", "form", "submitFieldWrapper");
            parent.append(heading2, heading3, submitFieldWrapper);

            let emailForm = elCreating("emailForm", "div", "form-wrapper");

            let inputForm = elCreating("inputForm", "input", "form-input", "submit-info");
            setAttributes(inputForm,
                "type", "text",
                "placeholder", "Email");
            emailForm.appendChild(inputForm);

            document.querySelector("form").addEventListener("submit", function (e) {
                e.preventDefault();
                console.log(inputForm.value);
            });

            let submitForm = elCreating("submitForm", "input", "app-section__button submit-btn");
            setAttributes(submitForm,
                "type", "submit",
                "value", "Subscribe to Advanced Program");
            submitFieldWrapper.append(emailForm, submitForm);
            removeElement("fourth-section");
        }
        return sectionType;
    }
}
function removeElement(elementId) {
    var element = document.getElementById(elementId);
    element.remove();
}

var factory = new SectionCreatorFactory();
factory.createType("standard");

You see,for advanced type i just copy pasted the code from join-us-section to create the new section. But as i know,dublicating code is not recommended. First of all this copy paste doesn't work,it creates three sections with the same characteristics as from function AddSection . I dont know how to make it smaller. I tried to do another function, to modify the element, to declare the variables global,but nothing works. Maybe i do the wrong aproach. I searched the whole internet for any documentations, but i dont find anything that fits my task.

Answer 1

I'll answer by asking a question to get you thinking. Could you use inheritance? What about conditional rendering?