Sous FireFox

DOMNodeInserted est un évènement de l'objet IHTMLDocument sous FireFox.

Il survient lorsqu'un nouvel élément HTML est ajouté au document.

Sous IE

Internet Explorer ne gère pas cet évènement.

Via un HTC (HTML Component), je lui ai ajouté un événement à comportement semblable.

Je pars d'un événement IE-only qui existe déjà onafterupdate (utilisé lorsqu'on fait du binding HTML/DataBase, donc quasi jamais)

PS : J'aurais pu créer un nouvel évènement (onChildAdded par exemple) mais cela aurait impliqué la création d'un propriété onChildAddedEvent pour tous les IHTMLElement afin de pouvoir appeler l'évent depuis l'élément enfant.

Via le HTC, j'appelle cet évènement sur le parent de tout nouveau noeud HTML (element.parentNode.fireEvent), et la propagation des events fait le reste.

Contrairement à FireFox, cet event n'est pas appelé pour tous les IHTMLNode mais seulement pour les IHTMLElement (les balises <xxx>)

L'évènement marche autant pour un IHTMLElement.appendChild(theNode) que pour un IHTMLElement.innerHTML = "<TheNode />"

L'évènement est appelé directement après l'ajout. Pas besoin de faire un setTimout ou quoique ce soit d'autre pour attendre que l'évent survienne.

Cet HTC ne change pas la manière dont DOMNodeInserted fonctionne sous FireFox et ne lui ajoute pas onafterupdate non plus.

Code Source de OnElementAdded.htc

<script>
    try {
        var ev = document.createEventObject();
        ev.newChild=element;
        ev.documentState=(
            element.document?
            element.document.readyState:
            element.ownerDocument?
                element.ownerDocument.readyState:
                document.readyState);
        ev.dynamicUpdate=(ev.documentState=="complete");
        
        if (element.parentNode) {
            element.parentNode.fireEvent("onafterupdate", ev);
        } else {
            document.fireEvent("onafterupdate", ev);
        }
    } catch (ex) {
        //alert(ex.message);
    }
</script>

Code à ajouter à la page principale (dans le HEAD, la place importe peu)

<style>
        * {
            behavior: url('onelementadded.htc');
        }
</style>

Les propriétés de event sont :

event :
- newChild : le nouvel élément
- srcElement : le parent
- dynamicUpdate : dit si l'élément est ajouté après le chargement du DOM ou pas
- cancelBubble : bloque la propagation de l'évent si déclaré false