Use Jquery to append html with css?

Question

I want to create a html link with some styling in it.

right now I'm using:

$('<a/>').text('sample')
         .attr('href', 'http://www.google.com/').appendTo('body');

$('a').css({
               float: 'right',
               fontFamily: 'Verdana, Arial, Helvetica, sans-serif',
               position: 'static',
               display: 'inline',
               visibility: 'inherit'
          });

but instead create and refer the tag 2 times, is there are simpler way to do it? like:

$('<a/>').text('sample')
         .attr('href', 'http://www.google.com/').appendTo('body');
         .css({
               float: 'right',
               fontFamily: 'Verdana, Arial, Helvetica, sans-serif',
               position: 'static',
               display: 'inline',
               visibility: 'inherit'
          });

Adil · Accepted Answer · 2013-04-01 07:47:06Z

2

You have semicolon at wrong place that terminates method chaining.

 .attr('href', 'http://www.google.com/').appendTo('body');
                                                        ^^^

You code would be

$('<a/>').text('sample')
     .attr('href', 'http://www.google.com/').appendTo('body')
     .css({
           float: 'right',
           fontFamily: 'Verdana, Arial, Helvetica, sans-serif',
           position: 'static',
           display: 'inline',
           visibility: 'inherit'
      });

answered Apr 1, 2013 at 7:47

Adil

148k25 gold badges217 silver badges207 bronze badges

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

Comments

GautamD31 · Accepted Answer · 2013-04-01 07:49:08Z

0

Try with

$('<a/>').text('sample')
     .attr('href', 'http://www.google.com/').appendTo('body')
     .css({
           float: 'right',
           fontFamily: 'Verdana, Arial, Helvetica, sans-serif',
           position: 'static',
           display: 'inline',
           visibility: 'inherit'
      });

you are terminating method chaining after giving "appendTo" so "css" will not be applicable there....try to remove that semicolon ';' at the end of appendTo('body') to include "css" also

answered Apr 1, 2013 at 7:49

GautamD31

28.8k10 gold badges66 silver badges86 bronze badges

Comments

Eli · Accepted Answer · 2013-04-01 07:49:33Z

0

$('<a>').text('sample')
         .attr('href', 'http://www.google.com/')
         .css({
               float: 'right',
               fontFamily: 'Verdana, Arial, Helvetica, sans-serif',
               position: 'static',
               display: 'inline',
               visibility: 'inherit'
          }).appendTo('body');

Demo: http://jsfiddle.net/wQLmw/

answered Apr 1, 2013 at 7:49

Eli

14.9k5 gold badges61 silver badges77 bronze badges

Collectives™ on Stack Overflow

Use Jquery to append html with css?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related