word-spacing doesn't seem to apply if I append elements with js (in a $(document).ready callback)

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>
开发者_JAVA百科</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?

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

You are not using the word spacing attribute in your example. What is happening is that in your html example the newlines are being interpreted as spaces (Which is exactly how HTML is supposed to work). In the jquery example, you have no spaces or newlines to create this effect. You have two choices to get what you want. Change the css to make the margins or padding wider on the anchor elements, or append either a space or newline in your jquery code.

This should be somewhat close to what you want without adding a space.

#navmenu a { padding: 0.5em 0 0.5em 0; }

For word spacing to work you need to add spaces.

$("selector").append($("<a></a>", {
    "href": "index.html",
    "text": "foo"
})).append(
    document.createTextNode(" ")
).append($("<a></a>", {
    "href": "index.html",
    "text": "bar"         
})).append(
    document.createTextNode(" ")
).append($("<a></a>", {
    "href": "index.html",
    "text": "baz"         
}));

Adding spaces like that seems like a pain to me. Use a different CSS technique instead.

Live example