Ключ объекта не принимает -

Question

У меня есть функция, которая создает элемент и набор атрибутов в соответствии с аргументами

function createInfo(x , obj , text){ 
    var element = document.createElement(x); 
    if(obj){ 
     var obj_child = Object.keys(obj); 
     for(var i = 0; i < obj_child.length; i++){ 
      element.setAttribute(obj_child[i], obj[obj_child[i]]); 
     } 
    } 
    if(text) 
     element.innerHTML = text; 
    return element; 
} 

он работает нормально, но проблема в том, когда я прохожу «данные-атрибут» в качестве аргумента, например

var div =createInfo("div",{class:"left_info",data-index:index},null) 

он бросает

Неожиданный маркер -

Почему он не принимает - от имени ключа? Что с этим не так?

Answer 1

data-index выглядит как «data минус index» парсера JavaScript и не имеет смысла там. Если вы хотите использовать его в качестве имени свойства, поместить его в кавычки, которые, как вы говорите JavaScript, что это просто имя свойства:

var div =createInfo("div",{class:"left_info","data-index":index},null) 
// ------------------------------------------^----------^ 

Некоторые старые браузеры могут понадобиться вам поставить class в кавычки, а также, по совершенно другой причине: class - это ключевое слово. (Но современные из них отлично с ней не быть в кавычках, стандартный JavaScript был обновлен в 2009 году, чтобы понять, что это не ключевое слово там.)

var div =createInfo("div",{"class":"left_info","data-index":index},null) 

Answer 2

Попробуйте определения объекта, как это:

var div =createInfo("div",{"class":"left_info","data-index":index},null)