How to insert attributes to created div using js

Question

I'm making simple 2D solar system in js.
I'm in the stage where I have few planets orbiting around the sun and even few moons.
I wanted to make simple script that would create dots I place where my planets currently are to draw their orbits.

So my code looks like this :

var drawtime = setInterval(createdot,1000);
function createdot(){
var dot = document.createElement('div');
var dotleft = document.getElementById('earth').style.left;
var dottop = document.getElementById('earth').style.top;

dot.setAttribute(hight, '1000px');
dot.setAttribute(width, '1000px');
dot.setAttribute(position, absolute);
dot.setAttribute(background, '#FFFFFF');
dot.style.top = dottop +'px';
dot.style.left = dotleft +'px';
};

dotleft/top is current place where my earth is.

I'm new to programming and I don't know even this idea is good. I was looking through internet and trying few methods but none of them worked. If you could help me and explain the process, that would be great. Thanks

What is exactly your problem? also, for setAttribute, you should use string dot.setAttribute("height", '1000px'); and you want to happend the div to the page — Crocsx, Feb 01 '19 at 03:50
My code does not work. I dont know why. I dont know if its my wrong thinking or simple mistype. — Yachooo, Feb 01 '19 at 03:53

score 0 · Answer 1 · answered Feb 01 '19 at 03:51

0

You'll want to assign your div an ID, and then you can do something like the following:

var div = document.getElementById('divID');
div.innerHTML += 'Extra stuff';

More information available at this SO post here.

answered Feb 01 '19 at 03:51

Greg

1,845
2
16
26

But i don't have the div in my css. I want to create the new div (single dot) each time the function work. Each time create dot in different place. From what you wrote i understand that i need to have it in css – Yachooo Feb 01 '19 at 04:01

score 0 · Answer 2 · answered Feb 01 '19 at 03:59

The attributes you are trying to set are actually styles: height, width, position, and background. Note the change to height, width, position, and background below. Also note the addition of the last line, which injects your new element into the page, attaching to the body tag as an example. Finally, as written right now, it will continuously put a dot in the same place unless you have some other function that is moving earth around.

var drawtime = setInterval(createdot,1000);
function createdot(){
    var dot = document.createElement('div');
  var dotleft = document.getElementById('earth').style.left;
  var dottop = document.getElementById('earth').style.top;

  dot.style.height = '10px';
  dot.style.width = '10px';
  dot.style.position = 'absolute';
  dot.style.background = '#c0c0c0';
  dot.style.top = dottop +'px';
  dot.style.left = dotleft +'px';

  document.body.appendChild(dot);
}

score 0 · Answer 3 · answered Feb 01 '19 at 04:00

There are several problems with your code. First you are using setAttribute for style properties. Secondly you should parseInt style.left and style.top of ur earth element. Thirdly if you want to setAttribute both the arguments should be string. Use the code below

function createdot(){
     var dot = document.createElement('div');
     //convert style left and top int because it contains 'px'
     var dotleft = parseInt(document.getElementById('earth').style.left);
     var dottop = parseInt(document.getElementById('earth').style.top);
     
     dot.style.height = "100px";
     dot.style.width = "100px";
     dot.style.position = "absolute"
     dot.style.backgroundColor = "red";
     dot.style.top = dottop +'px';
     dot.style.left = dotleft +'px';
     //return the element
     return dot;
    };
    //element is not stored in variable myDot
    let myDot = createdot();
    //adding it the <body> element
    document.body.appendChild(myDot);

<div id="earth" style="postion:absolute;top:200px;left:200px;"></div>

score 0 · Accepted Answer · answered Feb 01 '19 at 04:01

Check this has a starting point. I am not using the earth position, I will let you try to implement it :)

var drawtime = setInterval(createdot,1000);
function createdot(){
var dot = document.createElement('div');
var dotleft = document.getElementById('earth').style.left;
var dottop = document.getElementById('earth').style.top;

 // you can apply css like this
dot.style.height = "10px";
dot.style.width = "10px";
dot.style.backgroundColor ="#ff0000";
dot.style.position ="absolute";


  // or like this
dot.style.cssText="height:10px;width:10px;position:absolute;background-color:red;";


  //SetAttribute do not work for css properties, 
 //and you also needed to put the values into strings

  //happend the element to the body
  document.body.appendChild(dot);
};

https://codepen.io/crocsx-the-styleful/pen/JxWWXm

Works perfectly! Thanks. The best part is that my code looked very similarly earlier but i didn't know that i need to use appendChild. Lesson lerned thanks:) — Yachooo, Feb 01 '19 at 04:19
@Yachooo no problem :) you can also appendChild to inside the div Earth document.getElementById('earth').appendChild(dot); so that all your element will be oganised inside their planet — Crocsx, Feb 01 '19 at 05:20

How to insert attributes to created div using js

4 Answers4