/    Sign up×
Community /Pin to ProfileBookmark

Explanation of code and formatting a text node

Copy linkTweet thisAlerts:
Oct 05.2008

Yesterday I had some great help from aj_nsc to create a text node to display the output of a function. Whilst it works perfectly, I lack a bit of understanding about how it actually works, which means I’m struggling when it comes to developing the code to implement formatting.

Could anyone explain how this is doing what it is doing?

[code=html]
 var text = “Alter the exposure by ” + film[ftype][iso][exp] + ” stops”;
var node = document.createElement(“span”);
node.id = hidden;

if(!(document.getElementById(hidden))) {
document.body.appendChild(node);
}
document.getElementById(hidden).innerHTML = text;
[/code]

As for formatting I would like the outputted text to centered.

[code=html]
variable.setAttribute(“align”,”centre”);
[/code]

I’m pretty sure thats what I need to use in order to do this, but im not sure as to which variable to set this to, or how to control the span element in general.

Any help would be great.

to post a comment
JavaScript

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@FangOct 05.2008 — If the parent element is a table cell:node.parentNode.setAttribute("align","center");
Copy linkTweet thisAlerts:
@aj_nscOct 05.2008 — As for what the code is actually doing:

<i>
</i> var node = document.createElement("span"); //this is creating a new span element in your HTML (the equivalent of hard coding &lt;span&gt;&lt;/span&gt; tags)
node.id = hidden; //this is setting the id of your node to the JS variable hidden (that I'm assuming you declared elsewhere)

<i> </i>if(!(document.getElementById(hidden))) { //this if statement is checking to see if the span created above exists on your page already
<i> </i> document.body.appendChild(node); //if it does not exist, then we will append it to the body
<i> </i>}
<i> </i>document.getElementById(hidden).innerHTML = text; //now that we know the span is present in the document, change the innerHTML to the text that you want


Now that I actually look at it, it would make more sense if the code looked like this:

<i>
</i> if(!(document.getElementById(hidden))) {
document.body.appendChild(node);
var node = document.createElement("span");
node.id = hidden;
}
document.getElementById(hidden).innerHTML = text;



Best just to use the style property to set the CSS style of the span that you are creating.

Seeing how you want your text centered, though, it would make more create an element that is block level, by default, rather than setting a span to display:block. Try this:

<i>
</i>var node = document.createElement("div");
node.style.width = "100&amp;#37;";
node.style.border = "1px solid #000"; //this is just so you can see your element
node.style.textAlign = "center";


You don't need to declare all these style rules in your JS code, however. You can just include them in your regular stylesheet and set the id of the div you are creating to follow the rules in your stylesheet.
Copy linkTweet thisAlerts:
@DokOct 05.2008 — Probably just a typo but getElementById should receive a string as the argument
[CODE]document.getElementById([COLOR="Red"]'hidden'[/COLOR])[/CODE]
Copy linkTweet thisAlerts:
@allanibanezauthorOct 05.2008 — Thanks for the responses guys, I'm completely sorted now. Cheers for taking the time to explain the code aj_nsc. I've learnt something new today, which is always nice ?
×

Success!

Help @allanibanez spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...