Question

I am trying to change the color of elements that are only within the <code> tag but does not work.

I dont want to use document.GetElementByID as per the answers here getElementsByTagName in JavaScript

Below is my original code.

<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>

What i have tried is

<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

I still don't know why you're not using css, but here goes:

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/

A css only solution:

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

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

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

Answer 2

Please check this fiddle Click Here

You just have to change a Script of your code , Here is the script.

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


str = str.replace(/&lt;\/span&gt;/g, '<span style="color:red">&lt;/span&gt;</span>');
document.getElementsByTagName("code")[0].innerHTML = str;

I hope this is helpful to you.

Answer 3

Your question had the jQuery tag before it was edited away by another user. In case you want to use jQuery, here is one solution.

$(document).ready(function() {
    $("#wmd-post > code").css("color", "red");
});

Check out the JSFiddle

Answer 4

document.getElementsByTagName returns a NodeList, not a single element. You need to loop over the list.

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

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

Answer 5

Here a working example using Element.getElementsByTagName() which basically gets all elements in the document with the specified tag (in your case code tag). You can replace the "target" string using String.prototype.replace() .

(function(){
var text = document.getElementsByTagName('code'),
str = text[0].innerHTML;
str = str.replace(/&lt;\/span&gt;/g, '<span class="red">&lt;/span&gt;</span>');
text[0].innerHTML = str;
})();

.red{
  color:red;
}

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

我想改变<code> tag not working

5 个答案: