Por ejemplo,
var newElement = document.createElement('div'); newElement.innerHTML = "<p>new content</p><script>alert('Hello World!')</script>"; element.appendChild(newElement);Resultado: se agrega "nuevo contenido" en la página, pero no habrá una alerta que diga ¡Hola, mundo!
He probado los métodos innerHTML, insertAdjacentHTML, append, appendChild. Pero el problema es que JS y CSS no se cargan dinámicamente.
En jQuery, after() funciona 👍🏻
$(selector).after("<p>new content</p><script>alert('Hello World!')</script>");¿Hay algún equivalente para javascript puro?
Si está seguro de que el contenido de HTML string es safety y contiene una cadena con HTML válido, puede usar Range.createContextualFragment() (ejecuta scripts 🚨)
const HTMLContent = "<p>new content</p><script>alert('Hello World!')</script>"; const newElement = document.createRange().createContextualFragment(HTMLContent); document.body.appendChild(newElement)Puede usar eval para ejecutar sus scripts en formatos de cadena. jQuery también usa eval en algunas partes de la manipulación DOM bajo el capó.
const content = "<p>new content<\/p><script>alert('Hello World!')<\/script>"; const newElement = document.createElement('div'); newElement.innerHTML = content const scriptRegex = /(?<=<script>)(.*)(?=<\/script>)/g; //get scripts between script tags const scripts = content.match(scriptRegex); for(const script of scripts) { eval(script) //execute your string as a script } document.getElementById("content").appendChild(newElement); <div id="content"></div>Nota al margen, para su caso, no existe una forma llamada seguridad de convertir cadenas en secuencias de comandos porque alguien puede inyectar secuencias de comandos maliciosas en sus cadenas y ejecutarlas sin su aviso, por lo que debe asegurarse de que todas sus cadenas estén bajo su control correctamente. Puede verificar el ataque XSS para una mejor comprensión.
Debe llamar a su alerta cuando suceda algo, si desea que la alerta se muestre cuando agregue el HTML, luego envuélvalo en una función autoejecutable:
<script> (function(){ alert('Hello World!'); })() </script>