Necesito inyectar elementos de estilo en la sección principal de mi html usando JavaScript. Para algún contexto, estoy usando webpack para inyectar estilos. Tengo una función que se supone que inyecta estilos en una identificación dentro de las etiquetas de mi cabeza.
Así es como se ve mi html:
function insertAtElement(element) { var target = document.getElementById( "inject-theme-styles-here" ); target.appendChild(element); } <head> <meta charset="UTF-8" /> <title>Webpack tutorial</title> <noscript id="inject-theme-styles-here"></noscript> </head> <body> <div id="root"></div> </body>No obtengo el resultado deseado. En la pestaña del elemento en cromo lo agrega dentro de la etiqueta. Pero necesito que se agregue justo debajo, no dentro.
Si desea que su elemento se agregue después de target , en lugar de usar target.appendChild(element); que agrega un elemento secundario al objetivo, use lo siguiente:
target.parentNode.insertBefore(element, target.nextSibling);Cree manualmente un script, configure el atributo src y colóquelo dentro del encabezado usando el nombre de la etiqueta (o querySelector si lo desea)
// create a script element let theScript = document.createElement("script"); // define it as javascript script theScript.setAttribute("type","text/javascript"); // set the src theScript.setAttribute("src","src/myscript.js"); // insert into the head document.getElementsByTagName("head")[0].appendChild(theScript);