Preventing JS errors with Live Preview

I am building a "live preview" for an editor which gathers fext from inputs and textareas and places them into a graphically simulated field (looks like what the finished product will look like when saved).

For this, I need to be able to replace the text if certain markers show up (variable names which I want to change to example texts), but as I don't want to have a button (defeats the point in a live preview), JS throws errors when the page loads because the area is empty when the page loads.

The preview tag is:

<h3 id="emailTitle"></h3>

And I am using this to change it if '.$to.' is entered:

if(document.getElementById("emailTitle").innerHTML !== null)
        {
            var str = document.getElementById("emailTitle").innerHTML;

            if(str == "'.$to.'")
            {
        var res = str.replace("'.$to.'", "recipient@email.com");
            }
        document.getElementById("emailTitle").innerHTML = res;
        }

But my attempts to prevent the errors (the first if statement for instance) still produce the errors.

Is there any way to prevent these errors and keep the JS actually running?

via Chebli Mohamed