Estoy usando MutationObserver para realizar un seguimiento de los cambios de caracteres en mi editor de texto enriquecido. Cada vez que se edita un texto, se llama al método de devolución de llamada de mutación con la lista de registros de mutación. El destino de la mutación es el nodo de texto en el que se realizan los cambios. Quiero envolver este nodo de texto con un lapso para poder usar algo de css para resaltar el texto modificado. Sin embargo, esto no está funcionando para mí. ¿Puede por favor guiar qué estoy haciendo mal aquí?
function callback(mutations) { mutations.forEach(function(mutation){ if(mutation.type == 'characterData'){ let parentNode = mutation.target.parentElement; // Create the new node to insert let newNode = document.createElement("span"); newNode.classList.add('change-highlighter'); // appending existing text node to new span element newNode.appendChild(mutation.target); // inserting newNode before text node parentNode.insertBefore(newNode, mutation.target); } }); }Insertaría el lapso, luego agregaría el objetivo.
function callback(mutations) { mutations.forEach(function(mutation){ if(mutation.type == 'characterData'){ let parentNode = mutation.target.parentElement; // Create the new node to insert let newNode = document.createElement("span"); newNode.classList.add('change-highlighter'); // inserting newNode before text node parentNode.insertBefore(newNode, mutation.target); // appending existing text node to new span element newNode.appendChild(mutation.target); } }); }