Is there a pseudo-class selector for javascript modified nodes?

Question

function myfunc(){
    document.getElementById("bob").innerText += "azerty"; 
}

#bob{
    color: green;
    transition: all 1s;
}
#bob:modified{ /* ":modified" pseudo-class doesn't exists; I'm searching for the good one */
    color: red;
}

<div>I would like the green text below to turn red when it changes and then green again.</div>
<div id="bob">azerty</div>
<button onclick="myfunc();">click to modify</button>

I want to create a transition when I modify the text of my node via javascript. Is there a selector for nodes whose content is modified?

I tried ":first-child" by deleting then recreating the node, and ":defined", but it did not work.

I would like the transition to apply when the text is changed.

Answer 1

I would use the Web Animations API for this, instead of CSS transitions:

const el = document.getElementById("bob");
const [modifiedAnimation] = el.getAnimations();
modifiedAnimation.pause(); // don't run immediately
function myfunc(){
    el.innerText += "azerty";
    modifiedAnimation.play();
}

#bob {
    color: green;
    animation: modified 1s;
}
@keyframes modified {
    50% {
        color: red;
    }
}

<div>I would like the green text below to turn red when it changes and then green again.</div>
<div id="bob">azerty</div>
<button onclick="myfunc();">click to modify</button>

Above is a mix of CSS animations with JS, you can also do it entirely in JavaScript by using the animate method.