SitePoint Sponsor |
|
User Tag List
Results 1 to 10 of 10
Thread: create span element
-
Jul 30, 2007, 11:22 #1
- Join Date
- Feb 2007
- Location
- East of Ottawa, ON
- Posts
- 118
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
create span element
Where could I find examples of what I'm trying to achieve?
I want the JS insert a <span> within an <h2>
I've had no luck with createElement and appendChild
-
Jul 30, 2007, 11:29 #2
Post the code so we can help you modify it to a working state,
-
Jul 30, 2007, 11:55 #3
- Join Date
- Oct 2004
- Location
- Birtley, UK
- Posts
- 2,439
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
sorry mate, thought i'd be nice and respond to this:
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Untitled Document</title> <link rel="stylesheet" type="text/css" media="screen" /> <style type="text/css"> h2 span { color: red; } </style> <script type="text/javascript"> function insertSpan() { var h2s = document.getElementsByTagName('H2'); for(var i = 0; i < h2s.length; i++) { if((i % 2) == 0) { var sp = document.createElement('SPAN'); sp.appendChild(document.createTextNode(h2s[i].innerHTML)); h2s[i].innerHTML = ''; h2s[i].appendChild(sp); } } } window.onload = insertSpan; </script> </head> <body> <h2>Test 1</h2> <h2>Test 2</h2> <h2>Test 3</h2> <h2>Test 4</h2> <h2>Test 5</h2> <h2>Test 6</h2> <h2>Test 7</h2> <h2>Test 8</h2> </body> </html>
-
Jul 30, 2007, 12:25 #4
I usually think when you post a complete solution
the other person is not learning as much !!!!
But I am not against it ...
-
Jul 30, 2007, 13:04 #5
- Join Date
- Oct 2004
- Location
- Birtley, UK
- Posts
- 2,439
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
No need to explain, you get alot of people coming online to get answers to questions given by teachers etc.
-
Jul 30, 2007, 14:59 #6
- Join Date
- Oct 2000
- Location
- Nashvegas Baby!
- Posts
- 7,845
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Which is all the more reason they should be willing to do some of the work though.
Great solution by the way. Very nicely done.Adobe Certified Coldfusion MX 7 Developer
Adobe Certified Advanced Coldfusion MX Developer
My Blog (new) | My Family | My Freelance | My Recipes
-
Jul 30, 2007, 16:50 #7
- Join Date
- Nov 2005
- Location
- Trinidad
- Posts
- 3,746
- Mentioned
- 45 Post(s)
- Tagged
- 0 Thread(s)
What if you gave the <h2> an ID and inserted innerHTML into it ??
Code JavaScript:document.getElementById(YourH2Tag).innerHTML = '<span>Stuff...</span>';
Trying to fill the unforgiving minute
with sixty seconds' worth of distance run.
Update on Sitepoint's Migration to Discourse
-
Jul 30, 2007, 16:52 #8
- Join Date
- Nov 2005
- Location
- Trinidad
- Posts
- 3,746
- Mentioned
- 45 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by Shaun(OfTheDead)
Trying to fill the unforgiving minute
with sixty seconds' worth of distance run.
Update on Sitepoint's Migration to Discourse
-
Jul 31, 2007, 03:43 #9
- Join Date
- Feb 2007
- Location
- East of Ottawa, ON
- Posts
- 118
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks gRoberts.
that's what I was trying to use...
Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Untitled Document</title> <style type="text/css"> h2 {color: #006600; } span { color: #000066; } </style> <script type="text/javascript"> function insertSpan() { var h2_array = new Array(); var span, txt, temp; span = document.createElement('span'); txt = document.createTextNode('test'); span.appendChild(txt); temp = document.getElementsByTagName('h2'); for ( i=0; i<temp.length; i++) { h2_array[i] = temp[i]; alert(h2_array[i].innerHTML); h2_array[i].appendChild(span); document.body.appendChild(h2_array[i]); } } window.onload=function() { insertSpan(); } </script> </head> <body> <h2>lorem ipsum</h2> <h2>lorem ipsum</h2> <h2>lorem ipsum</h2> <h2>lorem ipsum</h2> </body> </html>
-
Jul 31, 2007, 06:53 #10
- Join Date
- Oct 2000
- Location
- Nashvegas Baby!
- Posts
- 7,845
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Shaun...
Your solution works if there's only one H2 on a page. But what if he wanted to do the same to every H2?Adobe Certified Coldfusion MX 7 Developer
Adobe Certified Advanced Coldfusion MX Developer
My Blog (new) | My Family | My Freelance | My Recipes
Bookmarks