CODEWITHSUNDEEP
javascripthtml
user2860857
user2860857

Reputation: 559

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

Upvotes: 9

Views: 27098

Answers (7)

user3704510
user3704510

Reputation: 1

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

Upvotes: -1

Usama nadeem
Usama nadeem

Reputation: 431

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.

Upvotes: 0

user13402797
user13402797

Reputation:

If you are not looking for a specified length, use the html entity &nbsp;,
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>

Upvotes: 2

Meenohara
Meenohara

Reputation: 314

(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.

Upvotes: 0

Hanlet Esca&#241;o
Hanlet Esca&#241;o

Reputation: 17380

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/

Upvotes: 1

user2625787
user2625787

Reputation:

  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 &nbsp;. This is a non-breaking space, and all of them get printed. But really, don't use it.

Upvotes: 16

Elon Than
Elon Than

Reputation: 9765

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

Upvotes: 2

Related Questions