Issue while setting html of div using the jquery html() method

Question

I've got an issue with jquery where I set the html of a div using the html method, but it does not set it correctly.

Here's the stripped down code I'm using:

<?xml version='1.0' encoding='utf-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>        
    <script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript"></script>
    <script type='text/javascript'>
      jQuery(document).ready(function($) {
        $('#results').html("<div class='tweet'><a href=javascript:sendDirectMessage('1711838', 'abc')>DM</a><hr/></div>");
      })      
    </script>
  </head>
  <body>
    <div id="results"/>    
  </body>
</html>

but when I view the result in the generated page using firebug, the element has it's contents set to:

<a )="" abc="" href="javascript:sendDirectMessage('1711838',">DM</a>

What am I doing wrong??

Aito · Accepted Answer · 2010-01-26 14:04:15Z

2

Perhaps you should enclose with double quotes:

<a href=\"javascript:sendDirectMessage('1711838', 'abc')\">

answered Jan 26, 2010 at 14:04

Aito

6,9023 gold badges33 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Quentin · Accepted Answer · 2010-01-26 14:06:57Z

2

The HTML you are trying to generate is invalid (this is your primary problem). Since you are using XHTML, the rules for quoting attributes are simple: attribute values must be quoted. Yours are not.
You are using JavaScript: pseudo URIs
You are using invalid XHTML
You are not using HTML-Compatible XHTML

answered Jan 26, 2010 at 14:06

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

2 Comments

bobince Over a year ago

5. You are including a redundant <?xml declaration, which does nothing except trip IE6-7 into Quirks Mode. 6. The URL isn't valid even for a javascript: pseudo-URL (the space would need encoding to %20. 7. You're using a javascript: pseudo-URL. David already said that, but I thought it was important enough to mention twice. Use event handlers like $('a').click(function() { sendDirectMessage(...); return false; }); instead.

Quentin Over a year ago

5 is covered by 4: w3.org/TR/xhtml-media-types/#C_1 , but 6 is a good point.

Darin Dimitrov · Accepted Answer · 2010-01-26 14:05:56Z

1

Try this:

$('#results').html('<div class="tweet"><a href="javascript:sendDirectMessage(\'1711838\', \'abc\')">DM</a><hr/></div>');

answered Jan 26, 2010 at 14:05

Darin Dimitrov

1.0m276 gold badges3.3k silver badges3k bronze badges

Comments

SLaks · Accepted Answer · 2010-01-26 14:06:26Z

0

You forgot to quote your href attribute.

Therefore, it stopped parsing the href's value after the first space.

You need to write the following:

$('#results').html(
"<div class='tweet'><a href=\"javascript:sendDirectMessage('1711838', 'abc')\">DM</a><hr/></div>"
);

The \" creates a " inside a double-quoted string.

answered Jan 26, 2010 at 14:06

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

Comments

Frank Shearar · Accepted Answer · 2010-01-26 14:10:22Z

0

As Aito says, you need double quotes:

$('#results').html("<div class='tweet'><a href=\"javascript:sendDirectMessage('1711838', 'abc')\">DM</a><hr/></div>");

answered Jan 26, 2010 at 14:10

Frank Shearar

17.2k8 gold badges72 silver badges96 bronze badges

Collectives™ on Stack Overflow

Issue while setting html of div using the jquery html() method

5 Answers 5

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related