jQuery append HTML with javascript link

Question

I have a situation where I should append html with jQuery. Within this html there is an a-tag with javascript as link.

How can I solve this?

$(".messages-wrapper").append('<li class="chat-wrapper"><a class="chat" href="javascript:openChat('http://domain.com/Messenger.aspx'">Chat öffnen<span></span><small>Chat öffnen</small></a></li>')

Thanks!!

Joel · Accepted Answer · 2010-04-13 15:54:20Z

4

You can escape single or double quotes in a string with a backslash.

'... href="javascript:openChat(\'http...\')">...'

answered Apr 13, 2010 at 15:54

Joel

19.4k3 gold badges67 silver badges84 bronze badges

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

Comments

tvanfosson · Accepted Answer · 2010-04-13 15:58:49Z

3

You're probably having problems because of the quotes in the string. The single quotes are terminating the string early and causing a javascript error.

Consider, however, applying the hander at the same time that you append the html.

 var link = $('<li class="chat-wrapper"><a class="chat" href="http://domain.com/Messenger.aspx">Chat öffnen<span></span><small>Chat öffnen</small></a></li>')
            .find('a')
            .click( function() {
                 openChat($(this).attr('href'));
                 return false;
            });
 link.appendTo(".messages-wrapper");

answered Apr 13, 2010 at 15:58

tvanfosson

534k102 gold badges703 silver badges801 bronze badges

5 Comments

Joel Over a year ago

+1, will degrade gracefully if javascript is not enabled, though I'm guessing the chat page needs JS anyway.

Guffa Over a year ago

@Joel: A bit moot to consider how code created with Javascript would behave if Javascript was not enabled...

Guffa Over a year ago

You are missing the point completely. If Javascript isn't enabled, the code that creates the link doesn't execute.

Joel Over a year ago

@Guffa, you are correct. However, I still discourage embedding javascript in markup, even javascript generated markup.

tvanfosson Over a year ago

@Guffa - you're right, of course, you caught me before my morning coffee and I responded without re-reading my answer. In my case what I usually do is simply put the HTML inline and add handlers later so I assumed that's how I had answered. If the chat page does require javascript, though, this would be a better way to add the HTML as it then wouldn't exist unless javascript were enabled.

Guffa · Accepted Answer · 2010-04-13 15:56:31Z

2

You just have to escape the apostrophes in the string using \':

$(".messages-wrapper")
.append('<li class="chat-wrapper"><a class="chat" href="javascript:openChat(\'http://domain.com/Messenger.aspx\'">Chat öffnen<span></span><small>Chat öffnen</small></a></li>');

answered Apr 13, 2010 at 15:56

Guffa

703k111 gold badges760 silver badges1k bronze badges

Comments

Tracker1 · Accepted Answer · 2010-04-14 00:45:55Z

1

Just use a nested append off of a created opject, to do the click action.

$('.messages-wrapper')
  .append(
    $('<li class="chat-wrapper" />")
      .append(
        $('<a class="chat" href="http://domain.com/Messenger.aspx"><small>Chat öffnen</small></a>')
          .click(function(){
            openChat(this.href);
            return false;
          })
      )
  );

This is easier to read the intention anyway, imho.

answered Apr 14, 2010 at 0:45

Tracker1

19.4k12 gold badges85 silver badges106 bronze badges

Collectives™ on Stack Overflow

jQuery append HTML with javascript link

4 Answers 4

Comments

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related