create span element

**geargolum** · Jul 30, 2007, 11:22

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

**GiorgosK** · Jul 30, 2007, 11:29

Post the code so we can help you modify it to a working state,

**gRoberts** · Jul 30, 2007, 11:55

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.

**GiorgosK** · Jul 30, 2007, 12:25

I usually think when you post a complete solution
the other person is not learning as much !!!!
But I am not against it ...

**gRoberts** · Jul 30, 2007, 13:04

No need to explain, you get alot of people coming online to get answers to questions given by teachers etc.

**creole** · Jul 30, 2007, 14:59

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.

**Shaun(OfTheDead)** · Jul 30, 2007, 16:50

What if you gave the <h2> an ID and inserted innerHTML into it ??

Code JavaScript:

document.getElementById(YourH2Tag).innerHTML = '<span>Stuff...</span>';

**Shaun(OfTheDead)** · Jul 30, 2007, 16:52

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.

**geargolum** · Jul 31, 2007, 03:43

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>

**creole** · Jul 31, 2007, 06:53

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?

The SitePoint Forums have moved.

User Tag List

Thread: create span element

Thread Tools

Display

create span element

Bookmarks

Bookmarks

Posting Permissions