SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2007
    Location
    East of Ottawa, ON
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy 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

  2. #2
    SitePoint Zealot GiorgosK's Avatar
    Join Date
    Jun 2007
    Posts
    179
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Post the code so we can help you modify it to a working state,

  3. #3
    SitePoint Wizard gRoberts's Avatar
    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 &#37; 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>
    My test works in both IE and FF.


  4. #4
    SitePoint Zealot GiorgosK's Avatar
    Join Date
    Jun 2007
    Posts
    179
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I usually think when you post a complete solution
    the other person is not learning as much !!!!
    But I am not against it ...

  5. #5
    SitePoint Wizard gRoberts's Avatar
    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.


  6. #6
    SitePoint Wizard creole's Avatar
    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

  7. #7
    Keep Moving Forward gold trophysilver trophybronze trophy
    Shaun(OfTheDead)'s Avatar
    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

  8. #8
    Keep Moving Forward gold trophysilver trophybronze trophy
    Shaun(OfTheDead)'s Avatar
    Join Date
    Nov 2005
    Location
    Trinidad
    Posts
    3,746
    Mentioned
    45 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Shaun(OfTheDead)
    What if you gave the <h2> an ID and inserted innerHTML into it ??
    oops!!... Too late... Y'all answered already.




    Trying to fill the unforgiving minute
    with sixty seconds' worth of distance run.

    Update on Sitepoint's Migration to Discourse

  9. #9
    SitePoint Zealot
    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>

  10. #10
    SitePoint Wizard creole's Avatar
    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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •