Discussion :

[markior]

Bonjour,

Je post ce message car je rencontre un problème en javascript.

Je suis en train de développer un script qui parse tout les éléments d'une page et qui insère un élément spécifique lorsqu'une certaine hauteur à l'affichage est atteinte.

La structure initiale de ma page ressemble à ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<div class="document">
    <div class="contenu">
        <p>du texte...</p>
        <p>blablabla</p>
    </div>
    <div class="contenu">
        <img src="ou_bien_des_images.png" />
    </div>
    [ect...]
</div>

Pour chaque balise div de classe contenu, je regarde sa position et sa hauteur :
- si sa hauteur et sa taille ne dépasse pas la hauteur fixer, je passe à l’élément suivant.
- si sa position dépasse la hauteur fixer, j'insère mon élément avant.
- si sa position est correcte mais que sa hauteur dépasse alors il faut que je divise l'element.

Le problème que je rencontre survient dans le troisième cas (un long paragraphe par exemple). J'aimerai pouvoir diviser le paragraphe, c'est à dire pourvoir fermer ma balise contenu à un certain niveau et en ouvrir une seconde avec le reste du paragraphe, de sorte à avoir une résultat de ce type :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<div class="document">
    <div class="contenu">
        <p>du texte...</p>
    </div>
    <div class="contenu">
        <p>blablabla</p>
    </div>
    <div class="contenu">
        <img src="ou_bien_des_images.png" />
    </div>
    [ect...]
</div>

Quand j'arrive sur l’élément <p>blablabla</p>, je fait un element.outerHtml = "</div><div class=\"contenu\">" + element.outerHtml;
Mais le résultat n'est pas celui désirer. Au final le j’obtiens quelque chose comme ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<div class="document">
    <div class="contenu">
        <p>du texte...</p>
        <div class="contenur"></div>
        <p>blablabla</p>
    </div>
    <div class="contenu">
        <img src="ou_bien_des_images.png" />
    </div>
    [ect...]
</div>

J'ai l'impression qu'on ne peut pas "fermer" un tag qui n'est pas dans l’élément que l'on modifie.

Quelqu'un a t il une idée de comment faire ou plus simplement si c'est possible de faire ce genre de manipulation ?

Merci d'avance à ceux qui prendront le temps de réfléchir à mon problème.

[NoSmoking]

Bonjour,
outerHTML est à proscrire !

Il te faut créer un clone ou encore déplacer l'élément dans son nouveau conteneur après l'avoir supprimé de son conteneur d'origine.

[sekaijin]

outerHtml n'est pas normalisé et ne fonctionne que sur certain navigateur

plutôt que de récuprérer la sérialisation du DOM pourquoi ne mas le parcourir ?
quant à ton problème sans code je ne vois pas trop ce qu'on peu faire pour t'aider

A+JYT