convertir html a cadena html en archivo JS

14

Quiero crear algunos html a través de JS, por lo tanto, necesito escribir el html dentro del archivo JS como:

function createHtmlSection() {
    return "<li class=\"chapter up-wrapper-btn\">" +
        "<div>" +
        "<button><i class=\"fa fa-plus\" onclick=\"addSection('up',this)\"></i></button>" +
        "<label contenteditable=\"true\">section 1</label>" +
        "</div>" +
        "</li>";
}

¿hay alguna herramienta o algún atajo para crear este tipo de cadena html?

Quiero decir, en este caso, tenía que escribir todo este html a mano. con +y necesario agregar "signo.

Algo que puede convertir esto:

<li class="chapter up-wrapper-btn">
    <div>
       <button><i class="fa fa-plus" onclick="addSection('up',this)"></i></button>
        <label contenteditable="true">section 1</label>
     </div>
</li>

a la primera cadena que necesitaba escribir a mano

javascript html Devy
fuente
¿De dónde obtendrá su script el HTML que desea convertir en una cadena?
George Bora
Esta publicación debería responder a su problema: stackoverflow.com/questions/220603/…
lainatnavi
¿Cuál es tu pregunta?
Mawg dice que reinstale a Mónica el

Respuestas:

7

Puede usar un literal de plantilla (tenga en cuenta los ticks posteriores). El literal admite multilínea, y no necesitará escapar de las comillas (necesitará escapar de los ticks de retroceso).

`<li class="chapter up-wrapper-btn">
    <div>
       <button><i class="fa fa-plus" onclick="addSection('up',this)"></i></button>
        <label contenteditable="true">section 1</label>
     </div>
</li>`

Ejemplo:

function createHtmlSection() {
  return `
    <li class="chapter up-wrapper-btn">
        <div>
           <button><i class="fa fa-plus" onclick="addSection('up',this)"></i></button>
            <label contenteditable="true">section 1</label>
         </div>
    </li>
  `;
}


document.querySelector('#root')
  .innerHTML = createHtmlSection();
<ul id="root"></ul>
Expandir fragmento

También puede pasar parámetros a la función e insertarlos en la cadena utilizando la interpolación de expresión :

Mostrar fragmento de código

Ori Drori
fuente
3
Buena respuesta, pero es importante decir que esta es la sintaxis ES6 que no es compatible con todos los navegadores. Por lo tanto, necesitaría algo como Babel para compilar su código en JavaScript compatible con el navegador (ES5).
Alex-HM
2
Por eso agrego un enlace a MDN. Tienen una tabla de compatibilidad en la parte inferior. Actualmente, el único navegador que no admite literales de plantilla es IE.
Ori Drori
3

actualice su archivo JS a:

function createHtmlSection() {
    return `
             <li class="chapter up-wrapper-btn">
                <div>
                  <button>
                     <i class="fa fa-plus" onclick="addSection('up',this)"></i> 
                  </button>
                  <label contenteditable="true">section 1</label>
               </div>
             </li>
          `
}

Lea este enlace para obtener más información: literales de plantilla

maryam
fuente
1

También puede usar '(una cita) para no tener que poner / poner delante cada "

ahmetbcakici
fuente
1

Solo use literales de plantilla (no una comilla simple "'" sino la marca de retroceso "` ") como esta:

// JavaScript

document.getElementById("a").innerHTML = `<li class="chapter up-wrapper-btn">
    <div>
       <button><i class="fa fa-plus" onclick="addSection('up',this)"></i></button>
        <label contenteditable="true">section 1</label>
     </div>
</li>`
<!-- HTML -->

<div id="a"></div>
Expandir fragmento

Los literales de plantilla son literales de cadena que permiten expresiones incrustadas. Puede utilizar cadenas de varias líneas y funciones de interpolación de cadenas con ellas. Se llamaron "cadenas de plantillas" en ediciones anteriores de la especificación ES2015.

Vía - MDN Web Docs

AndrewL64
fuente
1

Un método alternativo es usar comillas simples y escapar del carácter de nueva línea.

Algo como esto:

function createHtmlSection() {
    return '<li class="chapter up-wrapper-btn">\
        <div>\
            <button><i class="fa fa-plus" onclick="addSection(\'up\',this)"></i></button>\
            <label contenteditable="true">section 1</label>\
        </div>\
    </li>';
}

console.log(createHtmlSection());
Expandir fragmento

Cambiar a comillas simples le evita escapar de las comillas dobles en el HTML, pero aún necesita citar las comillas simples.

Otra alternativa es usar una matriz y .join('')esto:

function createHtmlSection() {
    return [
	'<li class="chapter up-wrapper-btn">',
            '<div>',
                '<button><i class="fa fa-plus" onclick="addSection(\'up\',this)"></i></button>',
                '<label contenteditable="true">section 1</label>',
            '</div>',
        '</li>'
    ].join('');
}

console.log(createHtmlSection());
Expandir fragmento

Esto le permite agregar / editar / eliminar fácilmente partes del código más adelante.

Ambas opciones son para ES5 o anterior.

Para los navegadores modernos, por favor utilice la versión ES6 proporcionada por Ori Drori .

Ismael Miguel
fuente