阻止执行innerHTML

Question

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

为此我正在使用此代码

 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标签：）

Answer 1

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

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

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