javascript: css не адресуется, почему?

Question

Я написал следующую функцию:

createEl : function (type, id, className, parent, value) {
var el= document.createElement(type);
if(id)
    el.id = id;
if(className)
    el.className = className;
if(parent)
    parent.appendChild(el);
if(value)
    el.appendChild(document.createTextNode(value));
return el;
}

с этим кодом:

var imageTD = this.createEl("td", null, "TD-IMAGE", bodyTR, bd);

css адресовано. но с этим кодом:

var imageTD = this.createEl('td', null, "TD-IMAGE".concat(entrie.isBefore(now)?"_DIMMED":'', bodyTR, bd);

ничего не происходит. что я сделал не так? Вот полный кодовый раздел:

getDom: function() {
var wrapper = this.createEl("div", null, null, null, null);

// tell MM to call and get our content
Log.log(JSON.stringify(this.active_birthdays));

if ((moment() > this.midnight) || (!this.loaded)) {
    var month = moment().month();
    var year = moment().year();
    var monthName = moment().format("MMMM");
    var monthLength = moment().daysInMonth();
    var now = moment();

    if(Object.keys(this.active_birthdays).length > 0) {

    // create your table here
    var table = this.createEl("table", "birthday-table", "TABLE", wrapper, null);

    // create tableheader here, array of column names
    var table_header = this.createTableHeader(table, "THEAD", [" "," "]);

    // create TBODY section with day names
    var tBody = this.createEl('tBody', "birthday-tbody", "TBODY", table, null);

    var birthdays_seen = {};        
    for(var birthday of Object.keys(this.active_birthdays)) {
        for(var person of this.active_birthdays[birthday]) {

        // create looped row section
        var bodyTR = this.createEl('tr', "birthday-tr-body", "TR-BODY", tBody, null);

        let now = moment();
        let entrie = moment(birthday,"DD.MM");

        if(this.config.dimmEntries) {               
            entrie = moment(birthday,'DD.MM');
        }

        // delete leading 0 and month
        var bd = "";

        if(birthdays_seen[birthday] == undefined) {
            bd = (birthday.startsWith("0")? birthday.substring(1): birthday).split('.')[0];
            var imageTD = this.createEl('td', null, "TD-IMAGE".concat(entrie.isBefore(now)?"_DIMMED":'', bodyTR, bd);

            var nameTD = this.createEl("td", null, "TD-BODY".concat(entrie.isBefore(now)?"_DIMMED":'', bodyTR, person.name);

            this.createEl("span", null, "TD-AGE", nameTD, " ");                     

            // needs class for width
            var spanTDo = this.createEl("span", null, "TD-AGE".concat(entrie.isBefore(now)?"_DIMMED":'', nameTD, person.age);

        }
        else{
            // add a break
            this.createEl("br", null , null , spanTDo, null);
            // add a span with name
            var nameTD = this.createEl("span", null, "TD-BODY".concat(entrie.isBefore(now)?"_DIMMED":'',spanTDo, person.name);

            // add a span with age
            var spanTD = this.createEl("span", null, "TD-AGE".concat(entrie.isBefore(now)?"_DIMMED":'', spanTDo, person.age);

        }                   

        var spacerTR = this.createEl("tr", null, null , tBody, null);
        var spacerTD = this.createEl("td", null, "SPACER", spacerTR, " ");
        spacerTD.colSpan = "2";
        birthdays_seen[birthday] = true;

        }
    }

    // Create TFOOT section -- currently used for debugging only
    if (this.config.debugging) {
        var table_footer = this.createTableFooter(tBody, null, [" "," "]);
        //footerTD.innerHTML = "Birthdaylist is currently in DEBUG mode!<br />Please see console log.";
    }
    else {
        var table_footer = this.createTableFooter(tBody, null, [" "," "]);
    }

    }

    // pass the created content back to MM to add to DOM.
    return wrapper;

}
// Dom is loaded
this.loaded = true;

},

большое спасибо заранее.

Answer 1

Проблема в том, что ваш родительский элемент bodyTR не определен, а bd также (из кодовой базы, которую вы опубликовали)

Если вы замените свой код на:

function createEl (type, id, className, parent, value) {
  const el = document.createElement(type);
  if(id)
      el.id = id;
  if(className)
      el.className = className;
  if(parent)
      parent.appendChild(el);
  if(value)
      el.appendChild(document.createTextNode(value));
  return el;
}

const imageTD = this.createEl("td", null, "TD-IMAGE", document.body, 'test');

console.log(imageTD)

Это работает!

Советы профессионалов: используйте const / let, когда вы решили использовать переменную, сегодня это общепринятый стандарт