Changing text color background in XUL

Hi All, I am trying to change the text color background of the text when selected. Although the following code does highlight the text, it seems to position the text on a new line when I change the text color background( i.e. call the function below)

{
     var url = content.document.location;
    var sel = content.window.getSelection();
    var range = sel.getRangeAt(0);
    var newNode = document.createElement("span");
    newNode.setAttribute("style","background-color:pink;");
    range.surroundContents(newNode);
   }

Any help would be appreciated

Hello, I have tried this code:

<script>

function demo()
{
var content = document.getElementById("content");

var url = document.location;
var sel = window.getSelection();
var range = sel.getRangeAt(0);
var newNode = document.createElement("span");
newNode.setAttribute("style","background-color:pink;");
range.surroundContents(newNode);
} 

</script>

And it works. The JavaScript part is correct, maybe a problem with the content component?

Thanks alot for your reply! I really appreciate it. What does this line of code do as it is not being referenced anywhere: var content = document.getElementById("content"); I tried your code. for some reason window.getselection() is not doing anything! Only content.window.getselection() works. I am calling this javascript function from an xul file. I have no idea what could be going wrong. Thank you

I have tried the code in a simple HTML page. Just to see if it can work. Inside a XUL page, you have to link the JavaScript code to your content. The reasons why it does not work may vary. Without the container it is difficult to judge.