Question

Here are the relevant parts of the code :

<div id="navmenu"></div>

The style for “navmenu” is :

#navmenu
{
word-spacing:5px;
padding: 5px 5px 5px 15px;
}

This is the code that adds the elements :

$(document).ready(function(){
    $("#navmenu").append($("<a href=\"index.html\">foo</a>"));
    $("#navmenu").append($("<a href=\"index.html\">bar</a>"));
    $("#navmenu").append($("<a href=\"index.html\">baz</a>"));
});

This is what I get :

However, if I write those elements directly in html, like this :

<div id="navmenu">  
<a href="index.html">foo</a>
<a href="index.html">bar</a>
<a href="index.html">baz</a>
</div>  

I get this (what it’s supposed to look like) :

I checked with “Inspect element” in Chrome, everything is the same. Any ideas why this doesn’t work?

Answer 1

Yes, you have no “enters” with using jQuery.

edit:

clear html:

<div id="navmenu">  
<a href="index.html">foo</a> [here is \n - enter]
<a href="index.html">bar</a> [here is \n - enter]
<a href="index.html">baz</a> [here is \n - enter]
</div>

builded with jquery:

<div id="navmenu">  
<a href="index.html">foo</a><a href="index.html">bar</a><a href="index.html">baz</a>
</div>

This is my theory:). Uss css to add margin-right to a‘s