'Can not add white space with 'innerHTML' between buttons

I have this javascript for adding white space between two buttons, I just created and inserted in a div:

document.getElementById("divID").appendChild(buttonONE);

document.getElementById("divID").innerHTML + ="           ";

document.getElementById("divID").appendChild(buttonTWO);

There is a space between the two buttons, but is always just one space, like if you had pressed the space-bar only once.

How can I increase these spaces to more than one?

Thanks

javascripthtml


Solution 1:[1]

  1. All white space in HTML, including line breaks, gets reduced to just one space. That's the rule.

  2. Don't use spaces. They are not exact. Use an element and give it a width, padding, or margin in CSS.

  3. If you MUST use spaces, use  . This is a non-breaking space, and all of them get printed. But really, don't use it.

Solution 2:[2]

You have to use   (non-breaking space) for each space to prevent browser from displaying it as one space.

Solution 3:[3]

If you are not looking for a specified length, use the html entity  ,
otherwise use margin-left:10px;
In JavaScript use:
window.onload = function(){ var element = document.getElementById("Element-Id"); element.style.marginLeft = "20px";
You do not need window.onload = function(){}, but you do need to make sure that the function is not executed until after it is loaded (As you probably know.)

var b;
b = 0;

function move() {
  var a = document.getElementById("example");
  b += 20;
  a.style.marginLeft = b + "px" // For moving a specified amount, just remove var b, b = 0, b+=20; and then replace a.style.marginLeft = b+"px"with a.style.marginLeft = "[amount]"; 
}
button{
outline:0;
border-radius:35%;
border-width:0;
background-color:red;
color:white;
cursor:pointer;
}
button:hover{
color:red;
background-color:blue;
}
a{
cursor:default;
border-radius:10%;
border-width:10%;
}
<html>

<head>
  <title>Example</title>

  <head>

    <body>
      <button onclick="move()">Move the text 20px to the left.</button><br>
      <a style="background-color:black;color:white;" id="example">Example</a>
    </body>

</html>

Solution 4:[4]

What about a CSS solution? You can give the element an ID and use an ID selector:

 #buttonTWO
    {
       margin-left: 20px;
    }

or if you can't use CSS set it with 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/

Solution 5:[5]

I believe you're getting this because of the nature of html stripping spaces.

You could perhaps use the white-space: pre css property on whatever element you are rendering that text.

<div id="divID" style="white-space: pre"></div>

I don't know alot about your application, but perhaps this will suffice.

Solution 6:[6]

(This is late answer, but it will benefit others who land on this page like I did when looking for a solution)

Using the pre tag for html solved my problem.

I was displaying an array which sometimes would have more than one space and I needed to preserve this without reducing it to a single space.

Solution 7:[7]

If you use replaceAll(' ', ' '). You will get as expected result as you want

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Elon Than
Solution 3
Solution 4 Hanlet Escaño
Solution 5 Usama nadeem
Solution 6
Solution 7 user3704510

Related Questions