Tengo el siguiente código javascript:
var html="<div class="col-lg-4 col-references" idreference=""+response+'"><span class="optionsRefer"><i class="glyphicon glyphicon-remove delRefer" style="color:red; cursor:pointer;" data-toggle="modal" data-target="#modalDel"></i><i class="glyphicon glyphicon-pencil editRefer" data-toggle="modal" data-target="#modalRefer" style="cursor:pointer;"></i></span><div id="contentRefer'+response+'">'+refer_summary+'</div><span id="nameRefer'+response+'">'+refer_name+'</span></div>';
$("#references").append(html);
Cuando se ejecuta este código, el refer_summary variable en realidad contiene una cadena que puede contener etiquetas HTML como <b>, <i> etc., sin embargo, esas etiquetas se muestran en la página en lugar de representar su comportamiento.
Por ejemplo, en la página mostraría <b> en lugar de hacer el contenido en negrita.
¿Cómo puedo procesar las etiquetas HTML cuando se agrega el valor?
En mi plantilla de Django uso {% autoescape off %}{{content}}{% endautoescape %} entonces, cuando cargo la página por primera vez, el contenido se representa correctamente con negrita, etc. Pero, ¿cómo puedo hacer lo mismo al agregar el html desde javascript?
¡Gracias por la ayuda!
Shubham Sureka
Puedes renderizar HTML usando documento.escribir()
document.write('<html><body><h2>HTML</h2></body></html>');
Pero para agregar una cadena HTML existente, debe obtener la identificación del nodo/etiqueta bajo el cual desea insertar su cadena HTML.
Hay dos formas en las que puedes lograr esto:
- Usando DOM –
var tag_id = document.getElementById('tagid');
var newNode = document.createElement('p');
newNode.appendChild(document.createTextNode('html string'));
- Usando HTML interno –
var tag_id = document.getElementById('tagid');
tag_id.innerHTML = 'HTML string';
-
La ventaja de 2 es que no hay nuevo elemento/dom como con
writey se crea 1. Parece una solución pura.– Timo
31 de marzo de 2021 a las 18:19
-
Debe agregarse para mayor claridad que en 1 y 2, cualquier marcado HTML contenido en el
'html string'será de hecho analizado y convertido a DOM nodos. Así que esto es una forma de hacer crecer el DOM, no solo para insertar cadenas de texto.–Marcin Wojnarski
11 de agosto de 2021 a las 22:57
Use $.parseHTML antes de agregar html como
var html="<div class="col-lg-4 col-references" idreference=""+response+'"><span class="optionsRefer"><i class="glyphicon glyphicon-remove delRefer" style="color:red; cursor:pointer;" data-toggle="modal" data-target="#modalDel"></i><i class="glyphicon glyphicon-pencil editRefer" data-toggle="modal" data-target="#modalRefer" style="cursor:pointer;"></i></span><div id="contentRefer'+response+'">'+refer_summary+'</div><span id="nameRefer'+response+'">'+refer_name+'</span></div>';
html = $.parseHTML( html);
$("#references").append(html);
-
Los otros enfoques no me funcionaron en Outsystems, pero este fue perfecto. Gracias.
– Souza
21 de febrero de 2020 a las 14:51
Puedes usar Javascript document.createRange().createContextualFragment:
const frag = document.createRange().createContextualFragment('<div>One</div><div>Two</div>');
console.log(frag);
/*
#document-fragment
<div>One</div>
<div>Two</div>
*/
Si desea hacerlo en ReactJS, puede usar el atributo “dangerouslySetInnerHTML”, en lugar del atributo “innerHTML”.
Como permite a los atacantes inyectar códigos (XSS), ¡se llama peligroso!
const myHtmlData = `
<ul>
<li>Item1<li>
<li>Item2<li>
</ul>`;
...
<div
dangerouslySetInnerHTML={{
__html: myHtmlData
}}>
Debe asignar una identificación a un div en particular y luego procesar/cambiar la interfaz de usuario en el div específico en consecuencia.
Dado aquí es una excelente explicacion.
Suena como un ataque XSS esperando a suceder.
–Robby Cornelissen
25 de enero de 2017 a las 4:59