Javascript tag build

raymondk

New Member
Messages
17
Reaction score
0
Points
0
I"m trying to write some tags in Javascript to apprear on my site, but they need to use the css for there style layouts, I am having issues getting this to work, any help out there?
 

Gouri

Community Paragon
Community Support
Messages
4,565
Reaction score
245
Points
63
Can you explain a littlebit more what exactly you want to achieve...

What issues you are getting?
 

raymondk

New Member
Messages
17
Reaction score
0
Points
0
What I have is an XML File that consists of a Description and the Link itself.

<navbar>
<title>home</title>
<link>index.html</link>
<id>links</id>
</navbar>

I am using Javascript to read the XML and then Build the <A> tag for all children of the main node.

var y = "<a href=" + x.getElementsByTagName("link")[0].childNodes[0].nodeValue + ">" + x.getElementsByTagName("title")[0].childNodes[0].nodeValue + "</a>";

document.write(y);

In my CSS I have the following to create the Proper feel and color scheme for the page.
a:link {color:#000066} /* unvisited link */
a:visited {color:#660000} /* visited link */
a:hover {color:#FF0066} /* mouse over link */
a:active {color:#400000} /* selected link */

The CSS should then build the style for the <a> tag as I want it.

I have also tried the following....

I created a <p> tag in Javascript
document.write("<p class=\"headings\" >testing 3</p>" + x.length);
in theory it should use the class from the CSS for this tag, But again its not.

#headings {border-bottom-style:dotted;
height: 90px;
{

Any help would a greatly thanked.
 

misson

Community Paragon
Community Support
Messages
2,572
Reaction score
72
Points
48
I am using Javascript to read the XML and then Build the <A> tag for all children of the main node.
Any particular reason you're doing this in JS? Does the XML result from an AJAX query?

Instead of creating a string and printing it with "document.write", use "document.createElement" and "document.createTextNode" to create nodes and "node.appendChild" to add the links to the document. You can also use the firstChild property rather than "childNodes[0]" to make things a little more readable.

Code:
var menu = document.getElementById('Menu');

var link = document.createElement('a');
link.href=xmlMenu.getElementsByTagName("link")[0].firstChild.nodeValue;

var title = xmlMenu.getElementsByTagName("title")[0].firstChild.nodeValue;
link.appendChild(document.createTextNode(title));

menu.appendChild(link);

As for the CSS issue you mention, selectors beginning with the octothorpe (aka "hash" aka "#") are ID selectors. The period denotes a class selector. The rest of the CSS you posted will correctly style links.

Protip: surround code samples with
Code:
, [PHP] or [HTML] tags as appropriate. It makes the code readable.
 
Last edited:
Top