Changing the position of a header text in javascript

Question

It might be a newbie question so I appologize in advance.

I added an element (header) to a div in javascript and I want to change it's position. For some reason this is not possible.

Below is a code sample.

Any idea what I am missing?

        var header = document.createElement("H7");
        var text = document.createTextNode(cardNum);
        header.appendChild(text);

        header.style.position="relative";
        header.style.left="400";

         //i and j are indexes
        document.getElementsByClassName('masonry-column')[j].getElementsByClassName('subject-details')[i].appendChild(header);

Update: Updated the code and the issue still remains. There are no errors in the console, the styles just do not take affect.

Header elements only go up to six (H6). I haven't looked beyond this. Although.. you are attempting to append the element three times. Append it once then change its style (or do this before appending). — Andy G
– Andy G, Commented May 31, 2014 at 22:42
Why do you append the same element 3 times? You can just write header.style.position = 'relative' and header.style.left = 400. After that, you just need one line to append if to the header. — GolezTrol
– GolezTrol, Commented May 31, 2014 at 22:44
But this question lacks: 1) information about what i and j are. 2) relevant error messages. Did you check for script errors? 3) the accompaniing HTML snippet, and preferably a jsfiddle that reproduces the problem 4) a basic lack of understanding about the problem in general (or so it seems). — GolezTrol
– GolezTrol, Commented May 31, 2014 at 22:46
@GolezTrol: You are correct about appending the element multiple times, I fixed my code but the issue still remains (thanks for the tip though). As for your questions: i, j are just indexes for classes in the DOM (there are multiple masonry-column elements). I do not get any error message, the changes just do not take place. I have to say I am new to JS so I apologize if my question is unclear. — r3x
– r3x, Commented May 31, 2014 at 22:52
Have you looked in the console in the developer tools (F12)? Javascript errors nowadays don't show in the browser as they used to do in old IE versions. Sorry for asking, I just want to be sure. — GolezTrol
– GolezTrol, Commented May 31, 2014 at 22:56

jme11 · Accepted Answer · 2014-05-31 23:05:43Z

2

If you fixed the javascript errors pointed out by others, I suspect the problem isn't the javascript so much as the css.

The css left property requires some form of measurement--px, %, cm, em-- take your pick, but you have to choose one! ;-) Try something like:

header.style.left='400px';

answered May 31, 2014 at 23:05

jme11

17.9k2 gold badges40 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Richard Taylor-Kenny · Accepted Answer · 2014-05-31 22:53:29Z

0

Try this:

var header = document.createElement("H6");
var text = document.createTextNode(cardNum);

header.appendChild(text);

document.getElementsByClassName('masonry-column')[j].getElementsByClassName('subject-details')[i].appendChild(header);
header.style.position='relative';
header.style.left= 100;

answered May 31, 2014 at 22:53

Richard Taylor-Kenny

705 bronze badges

1 Comment

r3x Over a year ago

Same issue (the styles did not take effect), thank you for the comment though :)

Collectives™ on Stack Overflow

Changing the position of a header text in javascript

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related