Change outerHTML in javascript or jquery
<p>I want to change the outerHTML and this is what I do:</p>

<pre><code>$(data.description)[0].outerHTML = $(data.description)[0].outerHTML.replace('red', 'black');
</code></pre>

<p>The value is:</p>

<pre><code>$(data.description)[0].outerHTML: "&lt;p style="color: red;"&gt;desc1&lt;/p&gt;"
</code></pre>

<p>and it doesn't get changed. How to change it?</p>

<p>data.description has this value:</p>

<pre><code>&lt;p style="color: red;"&gt;desc1&lt;/p&gt;&lt;p style="color: red;"&gt;desc2&lt;/p&gt;
</code></pre>

<p>And I want only $(data.description)[0] changed.</p>

<p>Here is my whole code:</p>

<pre><code>var ingsLines = $(data.description);
for (var i =0; i &lt; ingsLines.length; i++) {
    if (someCondition) {
        $(data.description).eq(i).css('color', 'black');
    }
}
try{$('#myTextarea').html(data.description);}catch(err){}
</code></pre>

<p>And the code changes the value, it puts black instead of red, but data.description stays with red.</p>
