Question

32

Using HTML tags in JavaScript strings while complying with W3C rules

rated 0 times [ 33] [ 1] / answers: 1 / hits: 54952 / 15 Years ago, sat, november 28, 2009, 12:00:00

Here's my code:

<a href=#>

    <img src=myimage.jpg 

     onmouseover=showDescription(

          'Text', 'Text with HTML tags in them<br />More text'); 

     onmouseout=revertDescription(); 

     alt=Image description>

The W3C Markup Validator doesn't like this. It doesn't want HTML tags inside my JavaScript code. Here's the error message it produces if I attempt this:

character < is the first character of a delimiter but occurred as data

How can I fix this while making sure that my page doesn't mess up if I pass the HTML tag-containing string to document.getElementById('myElement').innerHTML?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

gabriel

Add To Favorites

Follow

Total Points: 323

Total Questions: 107

Total Answers: 108

Location: Federated States of Micronesia

Member since Sun, May 16, 2021

3 Years ago

gabriel questions

1 Why doesn't triggering click() inside a click event listener cause an infinite loop?

Tue, May 4, 21, 00:00, 3 Years ago

1 Using test database when e2e-testing NestJS

Sun, Feb 14, 21, 00:00, 3 Years ago

1 Adding a custom button to DatePicker in material-ui

Tue, Dec 8, 20, 00:00, 4 Years ago

1 How to get value from localstorage react

Mon, Jun 8, 20, 00:00, 4 Years ago

1 How to include vue app inside another vue app?

Tue, May 19, 20, 00:00, 4 Years ago

View All

answered 15 Years ago paulinap · Accepted Answer

onmouseover=showDescription('Text', 'Text with HTML tags in them<br />More text');

Like with all attribute values, you must HTML-encode &, <, and the attribute delimiter ( here). The fact that it's JavaScript inside the attribute value makes no difference; the HTML attribute value is decoded before JavaScript gets a look at it.

onmouseover=showDescription('Text', 'Text with HTML tags in them&lt;br />More text');

This is in contrast to a <script> element, whose contents are CDATA and thus not &-escaped in HTML4. In XHTML there are no CDATA elements; you can add a <![CDATA[ section to make XHTML behave the same, but it's usually simpler for both script elements and event handler attributes to just avoid the problem by never using a & or < character. In a string literal another escape is available which you can use to get around this:

onmouseover=showDescription('Text', 'Text with HTML tags in themx3Cbr />More text');