Can I somehow prevent the return in my code from adding spaces between form elements?

Question

Possible duplicate:
Ignore spaces in HTML

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

In case of a problem

To describe all the necessary ingredients, I allow the user to add additional fields of the form of ingredients to the existing ones that are predefined HTML. You can add these new fields by clicking the "Add another ingredient" button. A javascript function called addIngredient () is called onclick (it is truncated for clarity, the 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 will happen

Input elements added via JavaScript have different spacing between them, created in advance using HTML. Here is a screen shot showing a visual error:

This excess distance disappears when I remove my results from HTML by defining input elements that were created in advance.

with return:

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

no refund:

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

This leads me to the conclusion that elements created using HTML actually affect the span or position by the way I write my code. Form elements created using Javascript, of course, are generated without any line breaks, so there are no such excess spaces.

My question

Honestly, I'm a little shocked that returning to my HTML seems to lead to some spacing on the web page. It’s funny to me that formatting the code will add things to the page. I do not want to delete the returned data in my code so that this does not happen.

Is there any other way besides deleting the returned data from my code to make sure that these spaces between my form elements are not showing?

Answer 1

In the HTML element, spaces are normalized to one space. If you have text, seven spaces and another text, these seven spaces will be normalized to one place. Similarly, if you have text, a return character, and another text, this return character will be normalized to one space.

You might think this is undesirable, but there would be at least so many odd situations if the returns were just deleted.

You cannot prevent these returns, resulting in a space between your input elements, but you can dynamically insert a space after each added element with dynamic addition. Thus, there is a space between all hardcoded inputs and those you added through the script.

Without any attempt to make the code look beautiful:

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

This (or something on these lines) should place the dynamic inputs in the same way as hard-coded ones.

Answer 2

Browsers expand spaces: one or more whitespace characters (space, tab, return) are collapsed into one space.

I do not know how to get around this. Perhaps you can set the font size to 0? or add a space to your JS. You can also try to float the input fields on the left ( span > input { float:left; } ), which floats only the input fields, and not the text content of the span element.

Answer 3

Any number of spaces, including lines, tabs, multiple space, etc. between HTML tags, it will be processed as one place when rendering. This is fundamental to HTML. If you are working with HTML output, you need to know about it and process it accordingly in the code that generates HTML.

Answer 4

As mentioned in another question , this is the only solution * I know:

 <span><!-- --><input><!-- --><input><!-- --><input><!-- --></span><br> 

* Well, if you want to call it a solution ...