CODEWITHSUNDEEP
javascripthtmlinnerhtml
user3307259
user3307259

Reputation:

prevent execution of innerHTML

I have a Chrome extension in which I'm fetching tab title and url, and putting them into one single line. Same as Chrome History. I want to separate them visually, dark title, lighter url.
dark title, light url

and for that I'm using this code 

 nodeTitle.innerHTML = tabs[j].title + "<span id='url'>" + ' - ' + tabs[j].url + "</span>" ;

CSS for #url is set and everything works fine, unless page title have some actual HTML code/tag in it, and title get messed (ofc. innerHTML works as it supposed to).

example page...look at title

innerText doesn't help in this situation, because I need < span > treated as it is.

Is there any way to cancel HTML execution for that first part (which can be any variable) or I have to separate them into two different elements and style them?
(and I'm really trying to avoid that)

...maybe check for tags and insert space if any exist??!... relized while writing this question, span tag in pointy brackets :)

Upvotes: 0

Views: 99

Answers (1)

James M
James M

Reputation: 16718

You can use createTextNode as an easy (though perhaps not very efficient) way to do this:

function textToHtml(str) {
    return document.createTextNode(str).innerHTML;
}

nodeTitle.innerHTML = textToHtml(tabs[j].title) + "<span id='url'>" + ' - ' + textToHtml(tabs[j].url) + "</span>" ;

Upvotes: 1

Related Questions