create a span tag

  • Thread starter sebastian.janoschka
  • Start date
S

sebastian.janoschka

Hello javascript newsgroup,

Sorry for my bad english please...

Today I have write some of my first JS scripts.

My problem is to create a <span> tag in the div tag with the name
"favoriten".

In the first step I create the span tag in the "hinzufügen" function
in my JS. The function is called when someone clicked a picture on my
site (onclick).
After that the span tag is create, but not exactly in my div
"favoriten"... The span tag is create on the top of my site...

Here I paste my code...

JS file (favoriten.js)
------------------------------
function hinzufügen() {

var favoritenDiv = document.getElementById("favoriten");
var auswahl = this;

var favobilder = favoritenDiv.getElementsByTagName("img");

if( favobilder.length < 3 ) {
favoritenDiv.appendChild(auswahl);
auswahl.onclick = null;
}
else {
alert("Es sind schon 3 Bilder in den Favoriten");
}

//Create a span tag
var neuSpanElement = document.createElement("span");
neuSpanElement.className = "rang";
var neuTextElement = document.createTextNode(5);
neuSpanElement.appendChild(neuTextElement);
favoritenDiv.appendChild(neuSpanElement);

}
------------------------------

html site: (index.html)
------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<style type="text/css">

..rang {

position:absolute;
text-align:center;
top:20px;
font-size:small;
background-color:#FFFFFF;
border:thin solid black;
width:20px;
z-index:99;

}

</style>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"
/>

<script type="text/javascript" src="favoriten.js"></script>
</head>

<body onload="autostart()">
<div id="part1">Hier eine Auswahl von Pics:</div>

<div id="bild">
<img src="images/elefant.jpg" />
<img src="images/kaffee.jpg" />
<img src="images/ajax.jpg" />
<img src="images/entwurfsmuster.jpg" />

</div>

<div id="part2">Hier deine Favorieten:</div>
<div id="favoriten">


</div>

</body>
</html>
------------------------------
 
A

ASM

(e-mail address removed) a écrit :
After that the span tag is create, but not exactly in my div
"favoriten"... The span tag is create on the top of my site...

not at all, your span is certainly in your div

but ... your css about class 'rang' tells :

..rang {
position:absolute;
top:20px;

and means 'rang' on top of page at 20px
because your div "favoriten" has no style position

give { position:relative; } to the div "favoriten"
or delete position:absolute; from 'rang'
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,995
Messages
2,570,236
Members
46,825
Latest member
VernonQuy6

Latest Threads

Top