0
207
VistasInsertar un elemento después de otro con .after() no funciona completamente
En una página web (desde un servidor remoto al que no tengo acceso) quiero insertar la URL de la página después de un determinado elemento y después de que se cargue la página web.
Mi solución se publica en el fragmento a continuación.
var address = document.URL; var pane = document.getElementsByClassName("heading--large")[0]; pane.after("<a href=\"" + address + "\">" + address + "</a>");Se inserta la URL de la página, pero solo como texto, no como un elemento reconocido.
La URL NO está activa como los otros enlaces. Echa un vistazo a la instantánea que subí.
¿Por qué el texto en mi elemento de anclaje no se muestra en azul? Además, el "href" no está resaltado en rojo como los otros elementos de anclaje que están debajo.
¿No es ".after ()" la función adecuada?
2 Respuestas
Responde la pregunta0
En su código, está insertando una cadena después del nodo del pane como muestra la documentación de Element.after . Si desea usar after , modifique su código con document.createElement y modifique los elementos resultantes para reflejar su intención original
var address = "https://www.ghacks.net/2021/10/02/which-are-the-best-screenshot-extensions-for-chrome/"; var pane = document.getElementsByClassName("heading--large")[0]; var myLink = document.createElement("a"); myLink.href = address; myLink.textContent = address; pane.after(myLink); <main class="post-list mt--60 mt--first--0"> <h1 class="heading--large" style="color:#43414e;font-weight:400;"> Which are the best screenshot extensions for Chrome? </h1> <div class="text-small ghacks-links ghacks-links--smallunderline mt--10 mb--20" style="font-size: 14px;opacity:0.9;margin-top:10px;margin-bottom:20px;"> by Shaun on October 02, 2021 in Google Chrome extensions - Last Update: September 30, 2021 - 6 comments </div> </main>0
.after() coloca nodos después de un elemento dado. Un nodo es muchas cosas, pero hay dos tipos de nodos que generalmente nos preocupan: elementos y texto. Sus requisitos son:
Crear un
<a>Agregue el atributo
hrefcon un valor predeterminado a<a>*Agregar contenido de texto predeterminado a
<a>*Coloque
<a>después de.heading--large** #2, #3 y #4 pueden estar en cualquier orden
.after() solo puede hacer #4, así que aquí hay una posibilidad si realmente desea usar .after() :
-
const A = document.createElement('a') -
A.href = address -
A.textContent = address -
pane.after(A)
const address = document.URL; // This a modern equivalent const pane = document.querySelector(".heading--large"); /* This will safely render htmlString at a specfic location in relation to a given element. */ pane.insertAdjacentHTML("afterEnd", `<a href="${address}">${address}</a>`); // Check to see if it's correct with .outerHTML property console.log(document.querySelector("header").outerHTML); <header> <h1 class='heading--large'>Chrome Extensions</h1> </header>