Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Introduction to jQuery DOM Manipulation Adding Content to the Page

Saqib Ishfaq
Saqib Ishfaq
13,912 Points
Posted by Saqib Ishfaq
Saqib Ishfaq
13,912 Points

i dont get the ' ' marks around <p></p> where teacher assembles the html of new element.

i get whats happening here as she opened the section tag and div tag and closed it with '<section><div></div></section> ' but in between

<p><strong>Name:</strong> ' + $name.val() + '</p><p><strong>species:</strong> '+ $species.val() + '</p><p><strong>notes:</strong> '+ $notes.val() + '</p>

why there isn't '<p></p>' i see we concatening a string value here and adding a variable in the middle, but why could we not do this instead? <p><strong>Name:</strong> ' + $name.val() +'</p>' '<p><strong>species:</strong> '+ $species.val() + '</p>' '<p><strong>notes:</strong> '+ $notes.val() + '</p>'

var $newPet = $(
'<section class="six columns"><div class="card"><p><strong>Name:</strong> ' + $name.val() +
  '</p><p><strong>species:</strong> '+ $species.val() +
    '</p><p><strong>notes:</strong> '+ $notes.val() +
      '</p><span class ="close">&times;</span></div></section>'
);

this is really bothering me to understand how its working! help please................thanks in advance

1 Answer

Matthew Long
Matthew Long
28,407 Points
Matthew Long
Matthew Long
28,407 Points

If i'm reading what you're saying correctly you're right that we could have moved the closing paragraph tag up but this wouldn't make a difference at all:

var $newPet = $(
   '<section class="six columns"><div class="card"><p><strong>Name:</strong> ' + $name.val() + '</p>' + 
   '<p><strong>Species:</strong> ' + $species.val() + '</p>' + 
   '<p><strong>Notes:</strong> ' + $notes.val() + '</p>' + 
   '<span class="close">&times;</span></div></section>'  
);

var $newPet = $(
   '<section class="six columns"><div class="card"><p><strong>Name:</strong> ' + $name.val() + 
   '</p><p><strong>Species:</strong> ' + $species.val() +  
   '</p><p><strong>Notes:</strong> ' + $notes.val() + 
   '</p><span class="close">&times;</span></div></section>'  
);

These are completely equal except you had to add an extra + operator. If this improves readability for you I suppose it's not a big deal, but removing the unnecessary + operator is what makes the most sense to me.

Saqib Ishfaq
Saqib Ishfaq
13,912 Points
Saqib Ishfaq
Saqib Ishfaq
13,912 Points

awww so it means it's fine, not a big deal then? whichever way i use ? i like the conventional method for now as i am trying to learn this new JQ framework ,all alien to me! don't want to get more confused:/

Matthew Long
Matthew Long
28,407 Points
Matthew Long
Matthew Long
28,407 Points

Ya it's fine. You can concatenate in a way that makes it look more like HTML structure if you like. In time you'll get tired of adding and managing quotation marks and you'll want to combine as much as possible into one string.