Question

Possible Duplicate:
Ignore whitespace in HTML

I am creating a Dutch recipe website. The problem is a visual error that occurs when adding new form fields through Javascript.

Where the problem occurs

In order to describe all the needed ingredients, I allow the user to add more ingredient form fields to the existing ones, which are defined beforehand by HTML. You can add these new fields by pressing the button that says ‘Add another ingredient’. A javascript function called addIngredient() is called onclick (it is truncated for clarity, full code can be found here):

function addIngredient() {
  ingredientCount++;

  //define the elements that should be created
  var Group = document.createElement("span");
  var Quantity = document.createElement("input");
  var Unit = document.createElement("input");
  var Type = document.createElement("input");
  var lineBreak = document.createElement("br");

  //set the attributes for each element
  Group.setAttribute("id", "ingredient_" + ingredientCount);
  Quantity.setAttribute("type", "text");
  Unit.setAttribute("type", "text");
  Type.setAttribute("type", "text");

  //add the ingredient group span and linebreak to the ingredients div
  var ingredientList = document.getElementById("ingredienten");
  ingredientList.appendChild(Group);
  ingredientList.appendChild(lineBreak);

  //add the ingredient form elements to the ingredient group span
  var addElements = document.getElementById("ingredient_" + ingredientCount);
  addElements.appendChild(Quantity);
  addElements.appendChild(Unit);
  addElements.appendChild(Type);
}

What happens

The input elements added through JavaScript appear to have different spacing between them from those created beforehand, by HTML. Here is a screencap showing the visual error:

This surplus spacing disappears when I remove my returns from the HTML defining the input elements that are created beforehand.

with returns:

<span>
  <input>
  <input>
  <input>
</span><br>

without returns:

<span>
  <input><input><input>
</span><br>

This leads me to conclude that the elements created with HTML actually are influenced in spacing or position by the way I write my code. The form elements created with Javascript are, of course, generated without any linebreaks, so these surplus spaces are not present.

My question

Frankly, I’m a bit shocked that hitting return in my HTML apparently outputs some spacing on the webpage. I find it ridiculous that code formatting would result in things to be added on the page. I do not want to remove the returns in my code to prevent it from happening.

Is there any other way than removing returns from my code to ensure that those spaces between my form elements do not show up?

Answer 1

Within an HTML element, whitespace is normalized to a single space. If you have some text, seven space characters, and some more text, those seven space characters will be normalized to a single space. Similarly, if you have some text, a return character, and some more text, that return character will be normalized to a single space.

You may think this is undesirable, but there would be at least as many odd situations if returns were just silently removed.

You can’t prevent those returns resulting in there being a space between your input elements, but you could dynamically insert a space after each dynamically-added input element. That way there’s a space between all of the inputs, the ‘hardcoded’ ones and the ones you’ve added via script.

Without any attempt to make the code look pretty:

var addElements = document.getElementById("ingredient_" + ingredientCount);
addElements.appendChild(Quantity);
addElements.appendChild(document.createTextNode(" "));
addElements.appendChild(Unit);
addElements.appendChild(document.createTextNode(" "));
addElements.appendChild(Type);

That (or something along those lines) should space the dynamic inputs in the same way that the hardcoded ones are spaced.