How to append a space after an element

Question

I was wondering how can I append a space after an element in JavaScript? I am creating an image and a span in for loop, and I want to append a space after the image and after the span. Here is how I create the tags:

var image = document.createElement("img");

Answer 1

var host = document.createElement ("div");

host.appendChild (document.createElement ("img"));
host.appendChild (document.createTextNode (" "));
host.appendChild (document.createElement ("span"));

console.log (host.innerHTML);

output

<img /> <span></span>

---

You can achieve the same visual appearance by using the CSS property margin on either the img or span.

Answer 2

Since you asked for some visual whitespace - the simplest and most flexible way is applying it through CSS, not using a space character:

img {
    margin-right: 5px;
}

If you want to only apply it to the specific element you create, you can use JavaScript to apply the CSS: http://jsfiddle.net/aRcPE/.

image.style.marginRight = "5px"; // "foo-bar" becomes "fooBar" since
                                 // the hyphen is not allowed in this notation