Tengo este <a class="myclass" href="#">test</a> que aparece dinámicamente en una página, ¿cómo modifico el href tan pronto como encuentro el elemento con myclass ?
Mi enfoque inicial ha sido agregar un detector de eventos onclick como se muestra a continuación, pero no parece "sobrescribir" la URL href original
$('body').on('click', '.myclass', function(){ window.location.href = "https://abcdef.com"; }); Podría agregar una verificación cada 1000 ms y usar getElementsByClassName pero no parece un buen enfoque
Use un MutationObserver para detectar cambios en la childList del cuerpo y cambie el atributo href del elemento en caso de que sea un ancla:
let observer = new MutationObserver(records => { for (const record of records) { for (const added of record.addedNodes) { if (added.nodeType == 1) { added.href = "https://stacksnippets.net" } } } }); observer.observe(document.body, { childList: true }); setTimeout(() => document.body.innerHTML += `<a class="myclass" href="#">dynamically added anchor</a>`, 1000)Lo he estado usando en mis proyectos por un tiempo.
function waitForElm(selector) { return new Promise(resolve => { if (document.querySelector(selector)) { return resolve(document.querySelector(selector)); } const observer = new MutationObserver(mutations => { if (document.querySelector(selector)) { resolve(document.querySelector(selector)); observer.disconnect(); } }); observer.observe(document.body, { childList: true, subtree: true }); }); }Para usarlo:
waitForElm('.some-class').then(elm => console.log(elm.textContent));o con async/await
const elm = await waitForElm('.some-classs')