在将内容从div复制到页面标题时，如何防止对'＆'字符进行HTML编码？

Question

I have a div whose contents are My Home & Administration
<div id="abc"> My Home & Administration></div>

In the scripts, I need to copy the contents of this div to my page title. Currently I am using innerHTML property which encodes the value.

<script type="text/javascript>
var id = document.getElementById("abc");
document.title = id.innerHTML;
</script>

The title is displayed as My Home & amp; Administration (Note: disregard the space between & and amp;)

Is there any alternate way where the title is displayed as is? I cannot use JQuery or any frameworks apart from pure and simple Javascript

Also note that this is not URL encoding but rather conversion of characters to their HTML entities.

Answer 1

You can use .textContent instead of .innerHTML .

.innerHTML is actually not part of the DOM spec. Most browsers offer it as a non-standard feature. There are several problems with .innerHTML .

Since you're interested in the actual text value of the node you can use .textContent .

It might be useful to know that the div abc actually has a node inside it, a TextNode , which holds the value. The div itself doesn't actually hold the value. If you were to traverse the DOM you would see this text node.

If your HTML is:

<div id="abc">Foo <strong>bar</strong> baz</div>

Your structure will be:

`div`:abc
  TextNode Foo
  `strong`
    TextNode bar
  TextNode baz

In this case abc.textContent will return "Foo bar baz" so it ignores the strong tag.

In comparison .innerHTML will return "Foo <strong>bar</strong> baz"

Similarly for:

<div id="abc">Foo&amp;Bar</div>

.textContent will be "Foo&Bar" , .innerHTML will be "Foo&Bar"