Javascript not able to replace text with new Text with html

Question

I trying to replace text with new text inside a html tag like:

  text = " hello how are you? " ;
  newText = "<h1>hello how are you? </h1> " ;

This is my code:

//replacer holds the html element
 var replacer = document.getElementById("#"+id);

 var newElement = "<span style='font-size:100px;' id='one4'>"+selectedinnerText+"</span>";

//selectedinnerText holds the text to be replaced                                                                 
 alert(selectedinnerText + "      "+ newElement   );

//This below line is not working properly
replacer.innerHTML = replacer.innerHTML.replace(selectedinnerText,newElement);

Answer 1

Your issue is, when you are getting an element by its id in JavaScript, you do not need # infront of the id name.

var replacer = document.getElementById(id);

So, the reason why you cannot set the innerHTML of the replacer element is because there is no element stored in the variable right now.

Answer 2

The correct code should be

 var replacer = document.getElementById(id);// no # needed here
 var newElement = "<span style='font-size:100px;' id='one4'>"+selectedinnerText+"</span>";

alert(selectedinnerText + "      "+ newElement   );

replacer.innerHTML = replacer.innerHTML.replace(selectedinnerText,newElement);