span-tags innerhalb der p-tags erzeugen @ tutorials.de: Tutorials, Forum & Hilfe

gremmlin · 08.01.09 17:04

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 :

1
2
3

var mySpan = document.createElement("span");
var myP = document.getElementsByTagName("p");
myP.appendChild(mySpan);

Geht leider nicht, drum bräuchte ich Hilfe

Danke!

Sven Mintel · 09.01.09 00:23

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.

gremmlin · 09.01.09 11:45

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);
}

Sven Mintel · 09.01.09 16:22

Du musst in der Schleife auf das aktuelle Element verweisen:

Code :

1	myP[B][COLOR="DarkRed"][i][/COLOR][/B].appendChild(mySpan);

gremmlin · 09.01.09 16:37

So eine sche**

Funktioniert immer noch nicht. Kann doch nicht sein!
Habs als <script>...</script> direkt im body stehen - kann das Schuld sein?

Sven Mintel · 09.01.09 16:55

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>

gremmlin · 09.01.09 17:56

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?

hans jörg · 09.01.09 18:47

Hi,
es gibt viel "sauberere" Lösungen als die Folgende, aber sie sollte deine Aufgabe zumindest lösen:

HTML-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)
  {
        myP[i].innerHTML  = '<span>'+myP[i].innerHTML +'</span>';
  }
//-->
</script>
</body>
</html>

gremmlin · 09.01.09 18:57

Sehr fein - so funktionierts!
Dankesehr!

Bin auch für saubere Lösungen aufgeschlossen - immer her damit

hans jörg · 09.01.09 19:13

Du könntest zb. innerhalb der Schleife
mit dem von dir zuvor verwendeten

HTML-Code:

var mySpan = document.createElement("span");

ein span Objekt erzeugen;
dann den Array

HTML-Code:

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-Code:

 myP[i].appendChild(mySpan);

wieder an.

Ist halt recht umständlich, vor allem da es ja auch mit viel weniger Code funktioniert.

Sven Mintel · 09.01.09 19:40

Zitat von gremmlin

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.

Wenn du mit "unterstreichen" durchgezogene Linien über und unter dem p meinst, für soetwas gibt es CSS-border.

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Suchwort hervorheben (ausser innerhalb von Tags)

div innerhalb eines form tags

Scrollbalken nur innerhalb des TD-Tags

Auf Tags innerhalb eines iframes zugreifen

XSL Stylesheet, Tags innerhalb von Tags

E-Mail:

Abonnieren Abbestellen