Most Elegant Way To Have One HTML Element Mirror Another?

If I have two HTML elements that should always contain the same inner HTML text, what is the most elegant way to update them both at the same time? For example: &l

Solution 1:

document.title.innerHTML is read-only in IE. This supposed to be a cross-browser method:

document.getElementById('screenTitle').innerHTML = document.title = 'My Application';

Instead of a literal value you can use a variable ofcourse.

If you really need something "elegant" (=== exotic), you can use a setter:

var page = {
    set title(text) {
        document.getElementById('screenTitle').innerHTML = document.title = text;
    }
};

When ever you need to change the titles, just set it: page.title = newTitle;. Only you need to care of, is that you can refer page object from the current scope. Also this will only work in modern browsers.

Solution 2:

Use a single function that encapsulates writes to both elements. So instead of directly using DOM methods, the rest of your code would use a function such as:

function setTitle(newTitle)
{
    document.getElementById('pageTitle').innerHTML = newTitle;
    document.getElementById('screenTitle').innerHTML = newTitle;
}

Of course this could be optimized/DRYed/refactored/overengineered ad nauseam...

function setTitle(newTitle)
{
    if (setTitle.elements)
    {
        var id = document.getElementByIdl
        setTitle.elements = [id('pageTitle'), id('screenTitle')];
    }

    setTitle.elements.forEach(function (elt)
    {
        elt.innerHTML = newTitle;
    });
}

Solution 3:

You should make a JS method that updates both simultaneously as long as you are in control of all the code that is going to modify the elements. Something like:

function updateElementGroup( newInnerHTML ) {
    document.getElementById( 'pageTitle' ).innerHTML = newInnerHTML;
    document.getElementById( 'screenTitle' ).innerHTML = newInnerHTM;
}

Which you can use like this:

updateElementGroup( 'New Text' );

If you are not in control of all the code you could set up some listeners to catch whenever one is changed and update the other one accordingly, something like this:

var isUpdating = false;
var elements = [
    document.getElementById( 'pageTitle' ),
    document.getElementById( 'screenTitle' ),
];

for ( i in elements ) {
    elements[i].addEventListener( 'DOMCharacterDataModified', function( evt ) {
        if ( isUpdating ) {
            return;
        }

        isUpdating = true;

        for ( i in elements ) {
            elements[i].innerHTML = evt.newValue;
        }

        isUpdating = false;
    } );
}

Solution 4:

Using jQuery:

$('#pageTitle').bind('DOMSubtreeModified', function() {
    if ($('#pageTitle').html() != $('#screenTitle').html())
        $('#screenTitle').html($('#pageTitle').html());
});

$('#screenTitle').bind('DOMSubtreeModified', function() {
    if ($('#pageTitle').html() != $('#screenTitle').html())
        $('#pageTitle').html($('#screenTitle').html());
});