No se pueden agregar espacios en blanco con ‘innerHTML’ entre los botones

Tengo este javascript para agregar espacios en blanco entre dos botones, que acabo de crear e insertar en un div :

 document.getElementById("divID").appendChild(buttonONE); document.getElementById("divID").innerHTML + =" "; document.getElementById("divID").appendChild(buttonTWO); 

Hay un espacio entre los dos botones, pero siempre es solo un espacio, como si hubiera presionado la barra espaciadora solo una vez.

¿Cómo puedo boost estos espacios a más de uno?

Gracias

  1. Todos los espacios en blanco en HTML, incluidos los saltos de línea, se reducen a un solo espacio. Esa es la regla.

  2. No uses espacios. No son exactos. Use un elemento y asigne un ancho, relleno o margen en CSS.

  3. Si DEBES usar espacios, usa   . Este es un espacio sin interrupciones, y todos ellos se imprimen. Pero en realidad, no lo uses.

Tienes que usar   (espacio sin interrupciones) para cada espacio para evitar que el navegador lo muestre como un espacio.

¿Qué pasa con una solución CSS? Puedes darle una identificación al elemento y usar un selector de identificación:

  #buttonTWO { margin-left: 20px; } 

o si no puedes usar CSS configúralo con Javascript:

 document.getElementById("divID").appendChild(document.getElementById("buttonONE")); var buttonTwo = document.getElementById("buttonTWO"); buttonTwo.style.marginLeft = "20px"; document.getElementById("divID").appendChild(buttonTwo); 

http://jsfiddle.net/Std8J/

(Esta es una respuesta tardía, pero beneficiará a otros que aparecen en esta página como lo hice cuando buscaba una solución)

Usando la etiqueta pre para html solucioné mi problema.

Estaba mostrando una matriz que a veces tenía más de un espacio y necesitaba preservarla sin reducirla a un solo espacio.