javascript - 我想更改 标签内元素的颜色不起作用

Question

我正在尝试更改仅在 <code> 范围内的元素的颜色标记但不起作用。

我不想按照此处的答案使用 document.GetElementByID getElementsByTagName in JavaScript

下面是我的原始代码。

<div id="wmd-post">
<code>
<p>&lt;/span&gt;</p> <!-- i would want only this to change color -->
</code>
 
<p>&lt;/span&gt;</p>  <!-- i would NOT want this to change color -->

</div>


<script>
 
var text = document.getElementById("wmd-post"); 
var str = text.innerHTML;
str = str.replace(/&lt;\/span&gt;/g, '<span style="color:red">&lt;/span&gt;</span>'); 
document.getElementById("wmd-post").innerHTML = str;

</script>

<小时/>

我尝试过的是

<div id="wmd-post">
<code>
  <p>&lt;/span&gt;</p>
</code>
 
<p>&lt;/span&gt;</p>  

</div>


<script>
 
var text = document.getElementsByTagName('code');
var str = text.innerHTML;
for(var i = 0; i < str.length; i++)
{
        str[i] = str.replace(/&lt;\/span&gt;/g, '<span style="color:red">&lt;/span&gt;</span>');
        document.getElementsByTagName("code").innerHTML = str[i];
}

</script>

Answer 1

我仍然不知道你为什么不使用 css，但这里是:

html:

<div id="wmd-post">
<code>
  <p>&lt;/span&gt;</p>
</code>

<p>&lt;/span&gt;</p>  

</div>

JS:

var text = document.getElementsByTagName('code')[0];
var str = text.innerHTML;

str = str.replace(/&lt;\/span&gt;/g, '<span style="color:red">&lt;/span&gt;</span>');

document.getElementsByTagName("code")[0].innerHTML = str;

fiddle :https://jsfiddle.net/u8ystwyg/1/

纯 CSS 解决方案:

<style>
  code { color: red; }
</style>

<div id="wmd-post">
<code>
  <p>&lt;/span&gt;</p>
</code>

<p>&lt;/span&gt;</p>  
</div>