阻止执行innerHTML

时间:2014-07-19 19:06:03

标签: javascript html innerhtml

我有一个Chrome扩展程序,我在其中获取标签标题和网址,并将它们放在一行中。与Chrome历史记录相同。我想在视觉上分开它们,黑暗的标题,更轻的网址 dark title, light url

为此我正在使用此代码

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

设置了#url的CSS并且一切正常,除非页面标题中包含一些实际的HTML代码/标记,并且标题变得混乱(ofc。innerHTML按预期工作)。

example page...look at title

innerText在这种情况下无济于事,因为我需要&lt; span&gt;按原样对待。

有没有办法取消第一部分(可以是任何变量)的HTML执行,或者我必须将它们分成两个不同的元素并设置样式? (我真的想避免这种情况)

...也许检查标签并插入空格(如果存在的话)??在写这个问题时重新设置,在尖括号中使用span标签:)

1 个答案:

答案 0 :(得分:1)

您可以使用createTextNode作为一种简单(但可能不是非常有效)的方式来执行此操作:

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

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