Javascript/DOM: insertBefore probleem - Softwareontwikkeling

vrijdag 1 oktober 2004 21:31

Acties:

Fabian

Topicstarter

Ik heb een script dat doet wat ik wil. Het einde van het script ziet er uit zoals hieronder staat. Het zorgt er voor dat m'n object "lijst" in m'n body komt, vlak na m'n h1. Dat werkt.

PHP:

1
2
3

var debody = document.getElementsByTagName("body")[0];
var dep = document.getElementsByTagName("p")[0];
debody.insertBefore(lijst, dep);

HTML:

<body>
<h1 id="top">XML</h1>
-> hier komt dan de lijst via javascript
<p>Alles door elkaar. </p>
<p>OK. Meer uitleg. </p>
...
</body>

Probleem is echter. Als ik m'n html aanpas tot

HTML:

<body>
<div id="container">
<h1 id="top">XML</h1>
<p>Alles door elkaar. </p>
<p>OK. Meer uitleg. </p>
...
</div>
</body>

Dus als er vlak na de body een div is (zodat "p" etc een niveau lager staan), dan krijg ik een javascript error (ongeldig argument, ik denk op regel nummer drie van m'n bovenstaande javascriptcode).

Ik heb al nagedacht tot en met hoe ik het kan oplossen, ook gegoogled, maar ik vind het compleet niet. 'k Weet ook niet waarop ik moet zoeken. Het moet met childs enzo te maken hebben, denk ik. Maar ik weet het echt niet.
Iemand die me m'n zoektoch wat kan verlichten? (Dat ik toch weet wat ik moet zoeken?)

vrijdag 1 oktober 2004 21:35

Acties:

Verwijderd

dep.parentNode.insertBefore(lijst,dep) ?

edit: ik weet niet hoe strict dit allemaal is, maar ik zou eerder doen
insertBefore(lijst,document.getElementById('top').nextSibling); want komt er altijd wel een <p> na die <h1>?

[ Voor 70% gewijzigd door Verwijderd op 01-10-2004 21:38 ]

zaterdag 2 oktober 2004 13:04

Acties:

F97

Fabian

Topicstarter

Verwijderd schreef op 01 oktober 2004 @ 21:35:
dep.parentNode.insertBefore(lijst,dep) ?

Edit: bij nader inzien werkt het toch niet, zit blijkbaar nog met andere fouten ofzo. Verdorie. Straks eens kijken met meer tijd. Aah.

[ Voor 40% gewijzigd door F97 op 02-10-2004 13:18 ]

zondag 3 oktober 2004 12:48

Acties:

F97

Fabian

Topicstarter

Het werkt nu, maar enkel in Internet Explorer. Niet in Opera en niet in Firefox. En daar krijg ik géén foutmelding.

De fout zit nu wel elders, in het begin van het script. En ik ben zeker dat het hier zit, alleen weet ik niet wat de fout zou kunnen zijn. Het werkt in IE maar dus niet in de andere browsers. Daardoor weet ik totaal niet wat er loos is.

PHP:

1
2
3

var kids = document.body.childNodes[0].childNodes;
window.alert(kids[0])
window.alert(document.body.childNodes.length);

In IE krijg ik bij de eerste alert als boodschap "object", in Opera en Firefox gewoon "undefined". Anders gezegd, m'n kids array wordt niet opgevuld. Maar waarom?

Edit: (Bij de tweede alert krijg ik (nog erger) in IE 1, in Opera 5 en in Firefox 3.)
M'n body bestaat uit een container div met daarin wat titels en paragrafen enzo. Normaal zou ik dan toch overal 1 moeten krijgen. Naar die container div?)

[ Voor 22% gewijzigd door F97 op 03-10-2004 12:54 ]

zondag 3 oktober 2004 12:54

Acties:

crisp

Devver

Pixelated

Wellicht is je eerste childNode geen elementNode maar een textNode

(IE en FF gaan daar anders mee om in de DOM-tree - IE stripped veel whitespace textNodes en FF zet ze wel in de tree - denk daarbij bijvoorbeeld ook aan newlines etcetera)

Intentionally left blank

zondag 3 oktober 2004 12:55

Acties:

Clay

cookie erbij?

whitespace maakt ook deel uit van de childNodes. Probeer het in ff maar eens met childNodes[1], dan werkt het wel.

edit:
crisp \o/

[ Voor 11% gewijzigd door Clay op 03-10-2004 12:56 ]

Instagram | Flickr | "Let my music become battle cries" - Frédéric Chopin

zondag 3 oktober 2004 12:58

Acties:

crisp

Devver

Pixelated

en om terug te komen op je oorspronkelijke probleem:

HTML:

<body>
<div id="container">
<h1 id="top">XML</h1>
<p>Alles door elkaar. </p>
<p>OK. Meer uitleg. </p>
...
</div>
</body>

ik zou denken dat dit toch wel moet werken:

JavaScript:

1
2
3

var dediv = document.getElementById('container');
var dep = document.getElementsByTagName('p')[0]; 
dediv.insertBefore(lijst, dep);

of zo:

JavaScript:

1 2	var dep = document.getElementsByTagName('p')[0]; dep.parentNode.insertBefore(lijst, dep);

of zo:

JavaScript:

1 2	var dep = document.getElementsByTagName('h1')[0]; dep.parentNode.insertBefore(lijst, dep.nextSibling);

[ Voor 25% gewijzigd door crisp op 03-10-2004 13:03 ]

Intentionally left blank

zondag 3 oktober 2004 13:11

Acties:

F97

Fabian

Topicstarter

Clay schreef op 03 oktober 2004 @ 12:55:
whitespace maakt ook deel uit van de childNodes. Probeer het in ff maar eens met childNodes[1], dan werkt het wel.

edit:
crisp \o/

Ja inderdaad. In Firefox krijg ik dan de juiste dingen. Uch. Maar hoe zorg ik dan dat alle drie de browsers het juist doen? Want in IE heb ik childNodes[0] nodig en in de andere childNodes[1]?

(Als je vlug links hebt waar ik er meer kan over lezen. Graag. Ben behoorlijk simpel aan't doen, veronderstel ik. Maar 't is omdat ik niet beter weet.)

zondag 3 oktober 2004 13:59

Acties:

Clay

cookie erbij?

http://www.mozilla.org/docs/dom/technote/whitespace/

Daar staat wel het eea (en ook waarom het er in zit). Het komt er op neer dat je moet gaan checken op nodetypes, b.v. met een while. Het handigste is dan waarschijnlijk om een paar standaard functies te maken die de eerste en laatste "echte" child van een element kunnen ophalen, en die de volgende "echte" node kunnen teruggeven.

Instagram | Flickr | "Let my music become battle cries" - Frédéric Chopin

maandag 4 oktober 2004 17:27

Acties:

F97

Fabian

Topicstarter

Aaaah. Domme ik. 'k Heb het net gevonden. En ongeveer allemaal solved. Mijn container probleem. Beetje dom van mezelf eigenlijk.

PHP:

1	var kids = document.body.childNodes[0].childNodes;

M'n probleem zat dus hier dat m'n childnodes zich een niveau lager bevonden. In die container div. Dusja, moest eigenlijk gewoon rechtstreeks inbreken in die div. Whehe.

PHP:

1 2	var container = document.getElementById("container"); var kids = container.childNodes;

Anyway. Iedereen bedankt voor de hulp. 't Heeft ergens wel geholpen :-)

edit:
geeft geholpen? mojahzeg, ik kick teveel op alliteraties

[ Voor 10% gewijzigd door F97 op 04-10-2004 20:36 ]