manipulation du dom avec appendTo, append
Bonjour,
Je déplace des span dans une liste crée à la volée pour servir de note en bas de page.
.
dans ce code qui fonctionne parfaitement avec appendTo("#note").
Mais pourquoi cela ne fonctionne pas avec append ?
Pourquoi l'absence du point virgule à la "fin du déplacement avec appendTo"
ne provoque pas d'erreur ?
des notes de bas de page.
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
// ont déplace les éléments entre .chapter et .footer
$('<ol id="notes></ol>"').insertAfter('div.chapter');
$('span.footNote').each(function(index){
$(this).before(
['<a href="#foot-note=',
index+1,
'" id="context-',
index+1,
'" class="context">',
'<sup>'+(index+1)+'</sup>',
'</a>'
]
.join('')
)
.appendTo('ol#notes')
// avec append ça ne fonctionne pas
}); |
xhtml
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
| <body>
<h1 id="f-title">Flatland : une aventure à plusieurs dimensions</h1>
<div id="f-author">par Edwin A. Abbot</div>
<h2>Partie 1, section 3</h2>
<h3 id="f-subtle">
Des habitants du Flatland
</h3>
<div id="excerpt">Un extrait</div>
<div class="chapter">
<p class="sqare">
lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous
lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous
<a href="http://fr.wikipedia.org/Pentagone_(figure)">Pentagone</a>
lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous
</p>
<p class="nobility hexagon">
lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous
lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous
lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous
<a href="http://fr.wikipedia.org/Cercle">Cercle</a>
</p>
<p class="pull-quote">
<a href="http://fr.wikipedia.org/Hexagone">Hexagone</a>
lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous
lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous
lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous
</p>
<p class="pull-quote">
<a href="http://fr.wikipedia.org/Hexagone">Hexagone</a>
lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous
lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous
lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous
</p>
<p class="pull-quote">
<a href="http://fr.wikipedia.org/Hexagone">Hexagone</a>
lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous
<span class="footNote">ddddddsfsdfsd sdfg df g dfg dfg df g dfg df g dg dfgfffff dfgdfg dfg dfg dfg
xav xav xav xav xav xav xav xav xav xav xav xav xav xav xav xav xav
xav xav xav xav xav xav xav xav </span>
lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous
lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous
</p>
<p class="pull-quote">
<a href="http://fr.wikipedia.org/Hexagone">Hexagone</a>
lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous
lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous
<span class="footNote">ddddddsfsdfsd sdfg df g dfg dfg df g dfg df g dg dfgfffff dfgdfg dfg dfg dfg
xav xav xav xav xav xav xav xav xav xav xav xav xav xav xav xav xav
xav xav xav xav xav xav xav xav </span>
lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous
</p>
<p class="pull-quote">
<a href="http://fr.wikipedia.org/Hexagone">Hexagone</a>
lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous
lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous
lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous
</p>
<p class="pull-quote">
<a href="http://fr.wikipedia.org/Hexagone">Hexagone</a>
<span class="footNote">ddddddsfsdfsd sdfg df g dfg dfg df g dfg df g dg dfgfffff dfgdfg dfg dfg dfg
xav xav xav xav xav xav xav xav xav xav xav xav xav xav xav xav xav
xav xav xav xav xav xav xav xav </span>
lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous
lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous
lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous
</p>
<p class="pull-quote">
<a href="http://fr.wikipedia.org/Hexagone">Hexagone</a>
lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous
lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous
<span class="footNote">ddddddsfsdfsd sdfg df g dfg dfg df g dfg df g dg dfgfffff dfgdfg dfg dfg dfg
xav xav xav xav xav xav xav xav xav xav xav xav xav xav xav xav xav
xav xav xav xav xav xav xav xav </span>
lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous
</p>
<p class="pull-quote">
<a href="http://fr.wikipedia.org/Hexagone">Hexagone</a>
lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous
lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous
lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous lorem lupsum dous
</p>
<!-- le code continue -->
</div>
<div id="footer">
pied de page, téléphone adresse, etc.
</div>
</body> |
Merci
