converter html em html string no arquivo JS

14

Eu quero criar algum html via JS, portanto, preciso escrever o html dentro do arquivo 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>";
}

existe uma ferramenta ou algum atalho para criar esse tipo de string html?

Quero dizer, nesse caso, eu precisava digitar todo esse html à mão. com +e necessário adicionar "sinal.

Algo que pode converter isso:

<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>

para a primeira string que eu precisava digitar manualmente

javascript html Devy
fonte
De onde seu script obterá o HTML que você deseja converter em uma string?
George Bora
Esta postagem deve responder ao seu problema: stackoverflow.com/questions/220603/…
lainatnavi
Qual a sua pergunta?
Mawg diz que restabelece Monica

Respostas:

7

Você pode usar um literal de modelo (observe os back-ticks). O literal suporta multilinhas, e você não precisará escapar das aspas (você precisará escapar de back-ticks).

`<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>`

Exemplo:

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 snippet

Você também pode passar parâmetros para a função e inseri-los na string usando a interpolação de expressão :

Mostrar snippet de código

Ori Drori
fonte
3
Boa resposta, mas é importante dizer que este é o ES6-Syntax, que não é suportado por todos os navegadores. Portanto, você precisaria de algo como Babel para compilar seu código em JavaScript compatível com o navegador (ES5).
Alex-HM
2
É por isso que adiciono um link ao MDN. Eles têm uma tabela de compatibilidade na parte inferior. Atualmente, o único navegador que não suporta literais de modelo é o IE.
Ori Drori
3

atualize seu arquivo JS para:

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>
          `
}

Leia este link para obter mais informações: literais de modelo

maryam
fonte
1

Você também pode usar '(uma citação) para não precisar colocar / exibir a frente "

ahmetbcakici
fonte
1

Basta usar literais de modelo (não uma única citação "'", mas o back-tick "` ") como este:

// 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 snippet

Literais de modelo são literais de string que permitem expressões incorporadas. Você pode usar strings de várias linhas e recursos de interpolação de strings com eles. Eles foram chamados de "strings de modelo" em edições anteriores da especificação do ES2015.

Via - Documentos da Web MDN

AndrewL64
fonte
1

Um método alternativo é usar aspas simples e escapar do caractere de nova linha.

Algo assim:

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 snippet

Trocar entre aspas simples evita que você escape as aspas duplas no HTML, mas você ainda precisa citar as aspas simples.

Outra alternativa é usar uma matriz e .join(''):

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 snippet

Isso permite que você adicione / edite / exclua facilmente partes do código posteriormente.

Ambas as opções são para ES5 ou mais antigo.

Para o navegador moderno, por favor use a versão ES6 fornecido pelo Ori Drori .

Ismael Miguel
fonte