span-tags innerhalb der p-tags erzeugen

gremmlin

gremmlin

Erfahrenes Mitglied
Hallo!

Ich vermute das is ein relativ leichtes Skript. Nur ich hab mit javascript noch nicht so viel gemacht. Darum funktionierts wahrscheinlich nicht, hehe...

Also ich will innerhalb der p-Tags span-Tags platzieren, damit ichs nicht immer händisch dazuschreiben muss und die Textzeilen farbig hinterlegt sind.

Ich hab mich mal ziemlich simpel damit versucht:
Code: 
var mySpan = document.createElement("span");
var myP = document.getElementsByTagName("p");
myP.appendChild(mySpan);

Geht leider nicht, drum bräuchte ich Hilfe :)
Danke!
 
Moin Gizzmo :-)

mit getElementsByTagName("p") erhältst du alle p-Elemente im Dokument(in Array-Form)
Wenn du alle diese Elemente um ein span bereichern willst, musst du diesen Array durchlaufen und jedem <p> einzeln den <span> verpassen.
 
moin moin!

Oke, hab das mal so angelegt, aber leider ohne Ergebnis - hab ich noch was zu beachten?

Code: 
var mySpan = document.createElement("span");
var myP = document.getElementsByTagName("p");
for (var i = 0; i < myP.length; ++i){
myP.appendChild(mySpan);
}
 
So eine sche** :)
Funktioniert immer noch nicht. Kann doch nicht sein!
Habs als <script>...</script> direkt im body stehen - kann das Schuld sein?
 
Du musst das Skript entweder nach dem letzten <p> im Dokument platzieren, oder aber bei onload ausführen.
Weiterhin müsstest du auch jeweils ein neues <span>-Element erzeugen.

Und damit du siehst, dass etwas eingefügt wurde, wäre es gut, wenn der span Inhalt hätte :)
Code: 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; 
                                charset=ISO-8859-1"   />
<meta name="author"             content="doktormolle" />
<meta name="date"               content="2009-01-09"  />
<title>Test</title>

</head>
<body>
<p></p>
<p></p>
<p></p>
<p></p>
<script type="text/javascript">
<!--

var myP = document.getElementsByTagName("p");
for (var i = 0; i < myP.length; ++i)
  {
    var mySpan = document.createElement("span");
    mySpan.appendChild(document.createTextNode('Ein neuer span'));
    myP[i].appendChild(mySpan);
  }
//-->
</script>
</body>
</html>
 
Okaay, vielen Dank schon mal!

Also er schreib zumindest nun vor dem </p> die zwei span-tags hin.
Ich will das Ganze allerdings deshalb machen, weil ich im nachhinein jedem Paragraph zusätzlich einen span-tag vor und nach dem Text geben will, damit ich die Zeilen unterstreichen kann.
Er müsste also den ersten span-tag nach dem öffnenden p-tag und den zweiten genau vor dem schließenden schreiben...
Kann javascript das auch?
 
Hi,
es gibt viel "sauberere" Lösungen als die Folgende, aber sie sollte deine Aufgabe zumindest lösen:
HTML: 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; 
                                charset=ISO-8859-1"   />
<meta name="author"             content="doktormolle" />
<meta name="date"               content="2009-01-09"  />
<title>Test</title>

</head>
<body>
<p></p>
<p></p>
<p></p>
<p></p>
<script type="text/javascript">
<!--

var myP = document.getElementsByTagName("p");
for (var i = 0; i < myP.length; ++i)
  {
        myP[i].innerHTML  = '<span>'+myP[i].innerHTML +'</span>';
  }
//-->
</script>
</body>
</html>
 
Du könntest zb. innerhalb der Schleife
mit dem von dir zuvor verwendeten
HTML: 
var mySpan = document.createElement("span");
ein span Objekt erzeugen;
dann den Array
HTML: 
myP[i].childNodes
in einer weiteren Schleife abarbeiten;
in dieser müsstest du die Kindknoten (mit deren Kindknoten) von myP[i] alle Klonen dem Span Objekt anfügen und von myP[i] entfernen;
wenn die innere Schleife abgearbeitet ist hängst du das Span Objekt mit deinem Code
HTML: 
myP[i].appendChild(mySpan);
wieder an.

Ist halt recht umständlich, vor allem da es ja auch mit viel weniger Code funktioniert.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück