CODEWITHSUNDEEP
javascripthtmlcss
Shiva
Shiva

Reputation: 73

Style button created using DOM property?

Here I am adding button dynamically inside the list tag. Buttons are appearing close to list and I am trying to move it right. Is there any way we can do that when button created by dom. Need guidance on this.

{
    var button = document.createElement("button");
    button.innerHTML = "Add To Favourite";
    button.setAttribute('onclick',
        'addFavourite("' + movie['title'] + '")');
    data.appendChild(button);
}

Upvotes: 0

Views: 1099

Answers (3)

ralfting
ralfting

Reputation: 213

You can use directly inline property float or margin (button.style.float = "right")

Or you can set inline style using el.style and pass all of your styles in this string. Something like this:

// Create element
var button = document.createElement("button");
button.innerHTML = "Add To Favourite";                     
button.setAttribute('onclick', addFavourite("'+movie['title']+'"));

// Styling
var styleButton = "float: right; margin-left: 10px;";
button.setAttribute('style', styleButton);

// append
data.appendChild(button);

Using float: Float CSS property MDN

Using Margin: Margin CSS property

Upvotes: 0

Ankit Agarwal
Ankit Agarwal

Reputation: 30739

You can use float: right; to move your button to rightmost side of <li>. You can also use margin-left: 40px; to move it few spaces to right of <li>

var data = document.getElementById('container');
var button = document.createElement("button");
button.innerHTML = "Add To Favourite";  
button.className = 'liBtn';
button.setAttribute('onclick',
'addFavourite("sss")');
data.appendChild(button);
.liBtn{
  margin-left: 40px;
}
<ul>
  <li id='container'>List 1</li>
</ul>

Upvotes: 2

Ein2012
Ein2012

Reputation: 1103

if u want to adjust try margin-left. Check this Fiddle I have written for your case. Hope it works!

Upvotes: 0

Related Questions