Quiero poder agregar etiquetas personalizadas alrededor del texto, así que digamos que tengo:
<p>Some text <img src="" /> more text </p>¿Cómo puedo obtener mis etiquetas personalizadas alrededor de 'Algo de texto' y 'más texto'? Las condiciones serán dinámicas, por lo que no puedo codificar para ninguna instancia. También es necesario hacer nodos secundarios, no estoy seguro de si el img en este ejemplo se considera un elemento secundario o no.
Si busca childNodes, puede verificar cada tipo de nodo para ver si es un elemento de Text . Si es así, reemplace esa entrada en el padre con una versión que esté envuelta en su etiqueta. Aquí he elegido <strong> para poner el texto en negrita y mostrar el efecto después del reemplazo.
const trigger = document.getElementById("trigger"); trigger.addEventListener("click", () => { const parent = document.querySelector("p"); const customTag = "strong"; for (const childNode of parent.childNodes) { if (childNode instanceof Text) { const text = childNode.data; const customElement = document.createElement(customTag); customElement.innerText = text; parent.replaceChild(customElement, childNode); } } }); <p>Some text <img src="https://www.gravatar.com/avatar/dc3dc4d5e0f2ded6a626771d2f1ae2a6?s=64&d=identicon&r=PG&f=1" /> more text </p> <button id="trigger">Wrap text with tag</button>Puede usar getElementsByTagName o usar la propiedad de los children
document.getElementsByTagName('p')[0].getElementsByTagName("img"); document.getElementsByTagName('p')[0].children