Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

JQuery - Como montar HTML com tags e texto

Olá! Sou novo no JQuery e me deparei com uma dúvida ao montar um trecho HTML contendo mais de uma tag e texto p.ex.

Exemplo:

Em JS posso montar da seguinte forma:


fraseHTML = "<span class=\"highlight\">" 
+ frase.text() + "</span>" 
+ frase2.text();

Em JQuery não encontrei uma forma mais enxuta do que a seguinte:


fraseHTML.html($("<span>").addClass("highlight").text(frase.text()));
fraseHTML.find("span").after(frase2.text());

Qual seria a melhor forma de escrever esse código em JQuery? Pergunto isso porque em algumas situações pode ser necessário criar trechos como esses e inserir no HTML. E nos casos de substituição, também me confundiu um pouco, apenas com o método replaceWith() foi possível, já que não temos acesso à propriedade outerHTML como no JS puro.

3 respostas

Fala ai Luiz, tudo bem? Acho que tu poderia passar tudo como string para a função html, algo assim:

fraseHTML.html(`<span class="highlight">${frase.text()}</span>${frase2.text()}`)

Assim o jQuery entende toda a string como o conteúdo HTML.

Espero ter ajudado.

Que estranho, tinha tentado desta forma em minha 1ª tentativa, porém no formato:

fraseHTML.html("" + "" + ...);

E não tinha dado certo, então achei que não aceitava este tipo de formato. Agora tentei novamente e foi, vai entender haha Tem algum caso que no JQuery não podemos usar este tipo de argumento?

solução!

Fala Luiz, acho que não, talvez tenha tido algum pequeno erro de digitação.

No geral podemos passar uma string com o template HTML que a função html vai conseguir converter para nós válidos no DOM.

Espero ter ajudado.