Javascript внутри HTML-теги

Question

Я хочу сослаться на переменную Javascript внутри HTML тега, как это:

<ul data-target="#{this.state.name}"></ul> 

но это не похоже, это справедливо синтаксис. Я знаю, что это возможно в Coffeescript, но есть ли аналогичный синтаксис в Javascript? Я использую ES6.

Answer 1

Вы, кажется, ищет template literals, которые позволяют сделать интерполяцию строки в ES6. Эквивалентно Coffeescript «s

"<ul data-target=\"#{this.state.name}\"></ul>" 

будет

`<ul data-target="${this.state.name}"></ul>` 

Answer 2

Вы должны удалить цитаты. и конкат # с значением state.name.

<ul data-target={"#" + this.state.name}></ul> 

Answer 3

Я считаю, что это невозможно без какой-либо структуры, например. Угловой.

С другой стороны, вы можете установить атрибут элемента, используя обычный JavaScript:

document.getElementById("my-thingy").setAttribute("data-target", "someStateName"); 

Answer 4

Как док говорит режим

HTMLElement.dataset свойство позволяет получить доступ, как в чтении и письменной форме, ко всем атрибутам пользовательских данных (data- *), установленным в элементе . Это карта DOMString, одна запись для каждого настраиваемого атрибута данных .

См: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset

извлекает весь объект набора данных с помощью свойства набора данных на элемент DOM.

var eleDOM = document.getElementById('list'); 

eleDOM.dataset;

принести индивидуальную собственность

eleDOM.dataset.data1; 

изменять отдельные свойства данных

eleDOM.dataset.data1 = "modified"; 

//Fetch the entire dataset object using the dataset property on the DOM element. 
 
var eleDOM = document.getElementById('list') 
 
console.log(eleDOM.dataset); 
 

 
//fetch the individual property 
 
console.log(eleDOM.dataset.data1); 
 

 
//Modify the individual data properties 
 
eleDOM.dataset.data1 = "modified";

<ul id ='list' data-data1 = "Panner" data-data2="Cheese"> 
 
</ul>