Pregunta simple estoy segura, pero no puedo ver por qué este código:

const addDiv = (test) => {
    const markup = `
      <div class=${test? "name":"name name-active"}></div>
    `;
    element.insertAdjacentHTML('beforeend', markup);
};

Da como resultado <div class="name" name-active=""> en lugar de <div class="name name-active">

¿He cometido un error simple o es un comportamiento que simplemente no entiendo? Gracias

0
NickW 9 oct. 2019 a las 20:57

3 respuestas

La mejor respuesta

Las comillas dobles dentro del literal de la plantilla no son parte de la cadena externa, por lo que deberá ajustar el valor de la clase en comillas externas.

Asegúrese de que class=" y " estén fuera de los literales de la plantilla

const addDiv = (test) => {
    const markup = `
      <div class="${test? "name":"name name-active"}"></div>
    `;
    element.insertAdjacentHTML('beforeend', markup);
};
5
Dhananjai Pai 9 oct. 2019 a las 18:01

Creo que es porque necesita agregar las comillas como caracteres escapados en su cadena devuelta ${test? "name":"\"name name-active\""}

0
luke-webdev 9 oct. 2019 a las 18:01
const addDiv = (test) => {
    const markup = document.createElement('div');
    markup.className = test ? "name" : "name active";
    element.insertAdjacentHTML('beforeend', markup);
};
0
Julio 9 oct. 2019 a las 18:27