[discussion] switch to text based element creation

[reteps]

Why are we using javascript to write html, and not just writing HTML?

createElement(TAGNAME, [CLASSES], ATTRS, CHILDREN)

instead of

var element = document.createElement("div")
element.innerHTML = `<ul><li>Children</li></ul>`

Not sure what advantage something like this has over html in terms of

• readability
• expressiveness
• modifications e.g. moving an element a different location

modals.push(new Modal("course-settings-modal", "Course Options", createElement("div", [], {}, [
    createElement("div", ["splus-modal-contents"], {}, [
        createElement("div", ["setting-entry"], {}, [
            createElement("h1", ["setting-title", "splus-coursealiasing-exempt"], { id: "course-options-course-name" })
        ]),
        createElement("div", ["setting-entry"], {}, [
            createElement("h2", ["setting-title"], {}, [
                createElement("label", ["centered-label"], { textContent: "Nickname: ", htmlFor: "setting-input-course-alias" }),
                createElement("input", [], { type: "text", id: "setting-input-course-alias" }, [])
            ]),
            createElement("p", ["setting-description"], { textContent: "A frendlier name for a course that shows anywhere the full name for the course would normally" })
        ])
    ]),
    createElement("div", ["settings-buttons-wrapper"], undefined, [
        createButton("save-course-settings", "Save Settings", saveCourseSettings),
        createElement("a", ["restore-defaults"], { textContent: "Restore Defaults", onclick: restoreCourseDefaults, href: "#" })
    ])
]), modalFooterText, setCourseOptionsContent));

This [same code rewritten] makes it easier to understand what html is actually being created

let courseSettingsModal = document.createElement("div")
courseSettingsModal.innerHTML = `
<div class="splus-modal-contents">
    <div class="setting-entry">
        <h1 class="setting-title splus-coursealiasing-exempt" id="course-options-course-name"></h1>
    </div>
    <div class="setting-entry">
        <h2 class="setting-title">
            <label class="centered-label" for="setting-input-course-alias">Nickname: </label>
            <input id="setting-input-course-alias">
        </h2>
        <p class="setting-description">A frendlier name for a course that shows anywhere the full name for the course would normally</p>
    </div>
</div>
<div class="settings-buttons-wrapper">
    ${ createButton("save-course-settings", "Save Settings", saveCourseSettings) }
    <a class="restore-defaults" href="#" onclick="restoreCourseDefaults">Restore Defaults</a>
</div>
`
modals.push(new Modal('course-settings-modal', "Course Options", courseSettingsModal));

If you have a valid reason why, I would love to hear it! Because I feel as if it makes it hard to modify and understand code that has been written in this way.

[reteps]

Never mind

[reteps]

There are some instances where it may be better to use a template literal however.

[aopell]

The createElement function is just a wrapper over document.createElement that helps with creating nested structures. Additionally, setting innerHTML is not allowed per Firefox extension guidelines without sanitization, and using template literals would require sanitizing each and every substitution. I do agree that sometimes this way is cumbersome though, though most of the time we shouldn't be creating large amounts of HTML from the JavaScript at all.