为createElement创建函数，该函数接受更多参数

Question

I am interested if there are any chances to make this code shorter.

 let event = document.createElement("div") event.classList.add("event") let time = document.createElement("div") time.classList.add("eventTime") time.textContent = "something" let timep = document.createElement("p") timep.classList.add("timep") let info = document.createElement("div") info.classList.add("eventInfo") let summary = document.createElement("h1") summary.classList.add("eventSummary") let organizer = document.createElement("p") organizer.classList.add("eventOrganizer") time.appendChild(timep) info.appendChild(summary) info.appendChild(organizer) event.appendChild(time) event.appendChild(info) document.getElementById("event").appendChild(event) 

 <div id="event"> Hello </div> 

Could this be written in a shorter version for example

 function elementCreation(name, style) { return document.createElement(name).classList.add(style) } let event = elementCreation("div", "event") let time = elementCreation("h1", "timeclass" //and so on event.appendChild(time) document.getElementById("event").appendChild(event) 

 <div id="event"></div> 

I have tried doing this function, but it displayed an error

TypeError: Cannot read property 'appendChild' of undefined

Is it possible without jquery?

Answer 1

Your elementCreation function must be return a Node , you're tries to return a .classList.add result (which is undefined). This code works:

 function elementCreation(name, style) { let element = document.createElement(name); element.classList.add(style); return element; } let event = elementCreation("div", "event") let time = elementCreation("h1", "timeclass") //and so on event.appendChild(time); document.getElementById("event").appendChild(event) 

 <div id="event"></div> 

Answer 2

It is because classList.add method does not return anything and that is last statement executed. To solved this:

function elementCreation(name, style) {
    let event = document.createElement(name);
    event.classList.add(style)
    return event;
}
let event = elementCreation("div", "event")
let time = elementCreation("h1", "timeclass")

event.appendChild(time);
document.getElementById("event").appendChild(event)