Change table headers
<p>I'm looking for a way to change some table headers. And some of these headers contain addition HTML code, like line breaks.</p>

<p>This is the typical setup of the table on the page (page source):</p>

<pre><code>&lt;table class="awesometable" style="width: 100%; margin-right: 0;"&gt;
    &lt;tr&gt;
        &lt;th style="background: red; color: white;"&gt;Male&lt;br /&gt; contestant&lt;/th&gt;
        &lt;th style="background: red; color: white;"&gt;Female&lt;br /&gt; contestant&lt;/th&gt;
    &lt;/tr&gt;
&lt;/table&gt;
</code></pre>

<p>Where <code>Male&lt;br /&gt;    contestant</code>, <code>Female&lt;br /&gt;    contestant</code> (and a series of other slight variation) should be changed to a simple symbol like <code>♂</code> and <code>♀</code>.</p>

<p>Using <code>document.body.innerHTML.replace()</code> replaces the entire DOM with new nodes, which is undesired, and can also change other instances were the text in the table header is also in plain text and were it shouldn't be changed, although this is rare, and only a minor issue.</p>

<p>Using a selective <code>nodeType == 3</code> fails on the additional line breaks.</p>

<p>Any ideas are welcome, code examples (here or at, for example, jsfiddle) are always preferred. Thanks.</p>
