VMartin Posted March 27, 2006 Share Posted March 27, 2006 Is there a way to do something like this with java script: <body><script type="text/javascript"> document.write ('<a class="linkstd" href="#">Link</a>');</script></body> What I'd like to know is if there's a possibility to write an HTML element using JavaScript to the page with certain CSS predefined style?TNXMartin Link to comment Share on other sites More sharing options...
scott100 Posted March 28, 2006 Share Posted March 28, 2006 Hi Martin, yes your code is absolutely fine, all you have to do is create the css class linkstd. <head><style type="text/css">a.linkstd:link {color: red}a.linkstd:visited {color: red}a.linkstd:hover {color: blue}a.linkstd:active {color: red}</style><head><body><script type="text/javascript">document.write ('<a class="linkstd" href="#">Link</a>');document.write ('<br /><br /><a class="linkstd" href="#">Another Link</a>');</script></body> Link to comment Share on other sites More sharing options...
VMartin Posted March 28, 2006 Author Share Posted March 28, 2006 Hey Scott, thanks for the help, it works.I have two more question: <link href="CSS/mfcssp.css" rel="stylesheet" type="text/css" /><script type="text/javascript">function Listing (Num) { var i = 0 for (i = 0; i < Num; i++){ document.write ('<li class="listd"><a class="linkstd" href="#">Link</a></li>') }}</script></head><body><ul class="liststd"> <script type="text/javascript"> var i = 0 for (i = 0; i < 10; i++){ document.write ('<li class="listd"><a class="linkstd" href="#">Link</a></li>') } </script> <input type="button" onclick="Listing (10)" value="Click me!" /></ul></body> 1. With the script that is defined in the body, everything works fine and the output is 10 links styled with "linkstd" class inside <li> elements with class "listd", but when the function Listing is called by the button, the output is 10 links in <li> tags but neither of them has the class applied. Does it have to do something with the script being in the head?2. When the page loads, two things are visible on it; the 10 links listed by the script in the body and the button. When I press the button, all of that goes away and the function Listing's output shows. How can I make the previous list and the button stay on the page?TNXMartin Link to comment Share on other sites More sharing options...
Chocolate570 Posted March 28, 2006 Share Posted March 28, 2006 Hi Martin,I can answer question 2. I can't fathom why question 1's problem could be happening---it should work. Scott will try to help you with that, I'm sure.Here's the code to answer #2. <script type="text/javascript">function Listing (Num) {var i = 0for (i = 0; i < Num; i++){document.documentElement.innerHTML+= '<li class="listd"><a class="linkstd" href="#">Link</a></li>'}}</script></head><body><ul class="liststd"><script type="text/javascript">var i = 0for (i = 0; i < 10; i++){document.documentElement.innerHTML+= '<li class="listd"><a class="linkstd" href="#">Link</a></li>'}document.documentElement.innerHTML+= '<input type="button" onclick="Listing (10)" value="Click me!" />'</script><input type="button" onclick="Listing (10)" value="Click me!" /></ul></body> Hope that helps.Choco Link to comment Share on other sites More sharing options...
scott100 Posted March 28, 2006 Share Posted March 28, 2006 1. when you clicked the button you were using document.write() to write to the page, this does not write to the current page but a new page, this new page does not have the style called to it so no style is applied.2. Again this is because you are using document.write() everything from the original page is lost, styles and content.Solution: use innerHTML to write to the current page. I have used a div, when the button is clicked it puts the contents of the loop in a variable then assigns the value of the variable to the innerHTML of the div, tada output appears on same page with styles an all <link href="CSS/mfcssp.css" rel="stylesheet" type="text/css" /><script type="text/javascript">function Listing (Num) { var content=""; var j = 0; content+="<ul class='liststd'>"; for (j = 0; j < Num; j++) { content+="<li class='listd'><a class='linkstd' href='#'>Link</a>"; } content+="</ul>"; document.getElementById('new').innerHTML=content;}</script></head><body><ul class="liststd"><script type="text/javascript">var i = 0;for (i = 0; i < 10; i++){ document.write ('<li class="listd"><a class="linkstd" href="#">Link</a></li>')}</script></ul><br /><br /><input type="button" onclick="Listing (10)" value="Click me!" /><div id="new"></div></body> Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now