384400/-toc-and-internals-links.md

## -toc-and-internals-links.md

      
    Raw
  

              -toc-and-internals-links.md
            
          
    Comment générer une table des matières et des liens hypertextes internes avec JavaScript ?


## toc-and-internals-links.html
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8" />
<title>Génération d'une table des matières et de liens hypertextes internes avec JavaScript</title>
<style>
    body {
        color: #222;
        font-family: monospace;
        font-size: large;
        margin: 0 auto;
        max-width: 1024px;
        width: 75%;
    }
    nav {
        margin-bottom: 2em;
        margin-top: 2em;
    }
    nav ul {
        font-size: smaller;
        list-style-type: none;
        margin-left: 1em;
        padding: 0;
    }
    nav a {
        color: inherit;
    }
    nav h3 {
        margin-left: 1em;
    }
    nav h4 {
        margin-left: 2em;
    }
    nav h5 {
        margin-left: 3em;
    }
    nav h6 {
        margin-left: 4em;
    }
    .js #no-support-js {
        display: none;
        visibility: hidden;
    }
    .no-js #no-support-js {
        display: block;
    }
    .no-js #no-support-dom {
        display: none;
        visibility: hidden;
    }
    .alert {
        color: red;
    }
</style>
</head>
<body>
<h1>Génération d'une table des matières et de liens hypertextes internes avec JavaScript</h1>
<div class="alert">
    <p id="no-support-js">Pour accéder correctement au contenu de cette page, votre navigateur doit supporter une version récente de JavaScript.</p>
    <p id="no-support-dom">Pour accéder correctement au contenu de cette page, votre navigateur doit supporter une version récente de JavaScript.</p>
</div>
<nav id="toc">
</nav>
<h2 class="link-to-map">Titre de deuxième niveau (1)</h2>
<p>Maecenas suscipit interdum nulla et mattis. Sed sapien felis, suscipit scelerisque fermentum non, consequat ac mi. Proin nec diam eros. Nulla malesuada varius dui, eu condimentum elit mollis eget. Duis pellentesque iaculis nulla, at suscipit dui posuere non. Aliquam finibus diam nulla, a efficitur eros placerat ut. Aenean vulputate lacinia mauris eget accumsan.</p>
<p>Quisque convallis elit ut dolor scelerisque, eu elementum nulla egestas. Aenean a semper dolor, et gravida turpis. Quisque sagittis est nec turpis rhoncus, sit amet elementum elit sagittis. Sed a facilisis dolor. Etiam libero risus, imperdiet non nunc quis, semper rutrum est. Curabitur eget eros tempus, hendrerit diam sit amet, tempus felis. Sed eget justo vitae est sodales scelerisque nec nec erat. Nunc nec venenatis nisi. Integer ut neque et neque pellentesque sollicitudin. Vivamus ut dignissim nisl, ac lacinia nisi. In pharetra mi ac ex imperdiet posuere. Quisque eu porta sem. Nunc nisl nibh, posuere ut luctus in, volutpat quis odio. Donec at velit turpis.</p>
<h3 class="link-to-map">Titre de troisième niveau (2)</h3>
<p>Maecenas suscipit interdum nulla et mattis. Sed sapien felis, suscipit scelerisque fermentum non, consequat ac mi. Proin nec diam eros. Nulla malesuada varius dui, eu condimentum elit mollis eget. Duis pellentesque iaculis nulla, at suscipit dui posuere non. Aliquam finibus diam nulla, a efficitur eros placerat ut. Aenean vulputate lacinia mauris eget accumsan.</p>
<p>Quisque convallis elit ut dolor scelerisque, eu elementum nulla egestas. Aenean a semper dolor, et gravida turpis. Quisque sagittis est nec turpis rhoncus, sit amet elementum elit sagittis. Sed a facilisis dolor. Etiam libero risus, imperdiet non nunc quis, semper rutrum est. Curabitur eget eros tempus, hendrerit diam sit amet, tempus felis. Sed eget justo vitae est sodales scelerisque nec nec erat. Nunc nec venenatis nisi. Integer ut neque et neque pellentesque sollicitudin. Vivamus ut dignissim nisl, ac lacinia nisi. In pharetra mi ac ex imperdiet posuere. Quisque eu porta sem. Nunc nisl nibh, posuere ut luctus in, volutpat quis odio. Donec at velit turpis.</p>
<h3 class="link-to-map">Titre de troisième niveau (3)</h3>
<p>Maecenas suscipit interdum nulla et mattis. Sed sapien felis, suscipit scelerisque fermentum non, consequat ac mi. Proin nec diam eros. Nulla malesuada varius dui, eu condimentum elit mollis eget. Duis pellentesque iaculis nulla, at suscipit dui posuere non. Aliquam finibus diam nulla, a efficitur eros placerat ut. Aenean vulputate lacinia mauris eget accumsan.</p>
<p>Quisque convallis elit ut dolor scelerisque, eu elementum nulla egestas. Aenean a semper dolor, et gravida turpis. Quisque sagittis est nec turpis rhoncus, sit amet elementum elit sagittis. Sed a facilisis dolor. Etiam libero risus, imperdiet non nunc quis, semper rutrum est. Curabitur eget eros tempus, hendrerit diam sit amet, tempus felis. Sed eget justo vitae est sodales scelerisque nec nec erat. Nunc nec venenatis nisi. Integer ut neque et neque pellentesque sollicitudin. Vivamus ut dignissim nisl, ac lacinia nisi. In pharetra mi ac ex imperdiet posuere. Quisque eu porta sem. Nunc nisl nibh, posuere ut luctus in, volutpat quis odio. Donec at velit turpis.</p>
<h4 class="link-to-map">Titre de quatrième niveau (4)</h4>
<p>Maecenas suscipit interdum nulla et mattis. Sed sapien felis, suscipit scelerisque fermentum non, consequat ac mi. Proin nec diam eros. Nulla malesuada varius dui, eu condimentum elit mollis eget. Duis pellentesque iaculis nulla, at suscipit dui posuere non. Aliquam finibus diam nulla, a efficitur eros placerat ut. Aenean vulputate lacinia mauris eget accumsan.</p>
<p>Quisque convallis elit ut dolor scelerisque, eu elementum nulla egestas. Aenean a semper dolor, et gravida turpis. Quisque sagittis est nec turpis rhoncus, sit amet elementum elit sagittis. Sed a facilisis dolor. Etiam libero risus, imperdiet non nunc quis, semper rutrum est. Curabitur eget eros tempus, hendrerit diam sit amet, tempus felis. Sed eget justo vitae est sodales scelerisque nec nec erat. Nunc nec venenatis nisi. Integer ut neque et neque pellentesque sollicitudin. Vivamus ut dignissim nisl, ac lacinia nisi. In pharetra mi ac ex imperdiet posuere. Quisque eu porta sem. Nunc nisl nibh, posuere ut luctus in, volutpat quis odio. Donec at velit turpis.</p>
<h4 class="link-to-map">Titre de quatrième niveau (5)</h4>
<p>Maecenas suscipit interdum nulla et mattis. Sed sapien felis, suscipit scelerisque fermentum non, consequat ac mi. Proin nec diam eros. Nulla malesuada varius dui, eu condimentum elit mollis eget. Duis pellentesque iaculis nulla, at suscipit dui posuere non. Aliquam finibus diam nulla, a efficitur eros placerat ut. Aenean vulputate lacinia mauris eget accumsan.</p>
<p>Quisque convallis elit ut dolor scelerisque, eu elementum nulla egestas. Aenean a semper dolor, et gravida turpis. Quisque sagittis est nec turpis rhoncus, sit amet elementum elit sagittis. Sed a facilisis dolor. Etiam libero risus, imperdiet non nunc quis, semper rutrum est. Curabitur eget eros tempus, hendrerit diam sit amet, tempus felis. Sed eget justo vitae est sodales scelerisque nec nec erat. Nunc nec venenatis nisi. Integer ut neque et neque pellentesque sollicitudin. Vivamus ut dignissim nisl, ac lacinia nisi. In pharetra mi ac ex imperdiet posuere. Quisque eu porta sem. Nunc nisl nibh, posuere ut luctus in, volutpat quis odio. Donec at velit turpis.</p>
<h2 class="link-to-map">Titre de deuxième niveau (6)</h2>
<p>Maecenas suscipit interdum nulla et mattis. Sed sapien felis, suscipit scelerisque fermentum non, consequat ac mi. Proin nec diam eros. Nulla malesuada varius dui, eu condimentum elit mollis eget. Duis pellentesque iaculis nulla, at suscipit dui posuere non. Aliquam finibus diam nulla, a efficitur eros placerat ut. Aenean vulputate lacinia mauris eget accumsan.</p>
<p>Quisque convallis elit ut dolor scelerisque, eu elementum nulla egestas. Aenean a semper dolor, et gravida turpis. Quisque sagittis est nec turpis rhoncus, sit amet elementum elit sagittis. Sed a facilisis dolor. Etiam libero risus, imperdiet non nunc quis, semper rutrum est. Curabitur eget eros tempus, hendrerit diam sit amet, tempus felis. Sed eget justo vitae est sodales scelerisque nec nec erat. Nunc nec venenatis nisi. Integer ut neque et neque pellentesque sollicitudin. Vivamus ut dignissim nisl, ac lacinia nisi. In pharetra mi ac ex imperdiet posuere. Quisque eu porta sem. Nunc nisl nibh, posuere ut luctus in, volutpat quis odio. Donec at velit turpis.</p>
<h2 class="link-to-map">Titre de deuxième niveau (7)</h2>
<p>Maecenas suscipit interdum nulla et mattis. Sed sapien felis, suscipit scelerisque fermentum non, consequat ac mi. Proin nec diam eros. Nulla malesuada varius dui, eu condimentum elit mollis eget. Duis pellentesque iaculis nulla, at suscipit dui posuere non. Aliquam finibus diam nulla, a efficitur eros placerat ut. Aenean vulputate lacinia mauris eget accumsan.</p>
<p>Quisque convallis elit ut dolor scelerisque, eu elementum nulla egestas. Aenean a semper dolor, et gravida turpis. Quisque sagittis est nec turpis rhoncus, sit amet elementum elit sagittis. Sed a facilisis dolor. Etiam libero risus, imperdiet non nunc quis, semper rutrum est. Curabitur eget eros tempus, hendrerit diam sit amet, tempus felis. Sed eget justo vitae est sodales scelerisque nec nec erat. Nunc nec venenatis nisi. Integer ut neque et neque pellentesque sollicitudin. Vivamus ut dignissim nisl, ac lacinia nisi. In pharetra mi ac ex imperdiet posuere. Quisque eu porta sem. Nunc nisl nibh, posuere ut luctus in, volutpat quis odio. Donec at velit turpis.</p>
<h2 class="link-to-map">Titre de deuxième niveau (8)</h2>
<p>Maecenas suscipit interdum nulla et mattis. Sed sapien felis, suscipit scelerisque fermentum non, consequat ac mi. Proin nec diam eros. Nulla malesuada varius dui, eu condimentum elit mollis eget. Duis pellentesque iaculis nulla, at suscipit dui posuere non. Aliquam finibus diam nulla, a efficitur eros placerat ut. Aenean vulputate lacinia mauris eget accumsan.</p>
<p>Quisque convallis elit ut dolor scelerisque, eu elementum nulla egestas. Aenean a semper dolor, et gravida turpis. Quisque sagittis est nec turpis rhoncus, sit amet elementum elit sagittis. Sed a facilisis dolor. Etiam libero risus, imperdiet non nunc quis, semper rutrum est. Curabitur eget eros tempus, hendrerit diam sit amet, tempus felis. Sed eget justo vitae est sodales scelerisque nec nec erat. Nunc nec venenatis nisi. Integer ut neque et neque pellentesque sollicitudin. Vivamus ut dignissim nisl, ac lacinia nisi. In pharetra mi ac ex imperdiet posuere. Quisque eu porta sem. Nunc nisl nibh, posuere ut luctus in, volutpat quis odio. Donec at velit turpis.</p>
<script>
/*
http://jscc.info/
http://jshint.com/ ou http://closure-compiler.appspot.com/home */
var html = document.querySelector('html');
html.classList.add('js');
html.classList.remove('no-js');
var checkSupportDom = document.querySelector('#no-support-dom');
checkSupportDom.parentNode.removeChild(checkSupportDom); /* Supprime le contenu de l'élément si la propriété est supportée.*/
var title = document.createElement('h2');
var text = document.createTextNode('Table des matières');
title.appendChild(text);
document.querySelector('#toc').appendChild(title);
var ul = document.createElement('ul');
var entries = document.querySelectorAll('.link-to-map'); /* Avec 'i', la casse est ignorée. */
for (var i = 0; i < entries.length; ++i) {
    entries[i].setAttribute('id', 'link-to-map' + i);
    var li = document.createElement('li');
    var tagFrom = entries[i].tagName.toLowerCase();
    var tag = document.createElement(tagFrom);
    var link = document.createElement('a');
    link.setAttribute('href', '#link-to-map' + i);
    var text = document.createTextNode(entries[i].textContent);
    link.appendChild(text);
    tag.appendChild(link);
    li.appendChild(tag);
    ul.appendChild(li);
}
document.querySelector('#toc').appendChild(ul);
</script>
</body>
</html>
	<!DOCTYPE html>
	<html class="no-js">
	<head>
	<meta charset="utf-8" />
	<title>Génération d'une table des matières et de liens hypertextes internes avec JavaScript</title>
	<style>
	body {
	color: #222;
	font-family: monospace;
	font-size: large;
	margin: 0 auto;
	max-width: 1024px;
	width: 75%;
	}
	nav {
	margin-bottom: 2em;
	margin-top: 2em;
	}
	nav ul {
	font-size: smaller;
	list-style-type: none;
	margin-left: 1em;
	padding: 0;
	}
	nav a {
	color: inherit;
	}
	nav h3 {
	margin-left: 1em;
	}
	nav h4 {
	margin-left: 2em;
	}
	nav h5 {
	margin-left: 3em;
	}
	nav h6 {
	margin-left: 4em;
	}
	.js #no-support-js {
	display: none;
	visibility: hidden;
	}
	.no-js #no-support-js {
	display: block;
	}
	.no-js #no-support-dom {
	display: none;
	visibility: hidden;
	}
	.alert {
	color: red;
	}
	</style>
	</head>
	<body>
	<h1>Génération d'une table des matières et de liens hypertextes internes avec JavaScript</h1>
	<div class="alert">
	<p id="no-support-js">Pour accéder correctement au contenu de cette page, votre navigateur doit supporter une version récente de JavaScript.</p>
	<p id="no-support-dom">Pour accéder correctement au contenu de cette page, votre navigateur doit supporter une version récente de JavaScript.</p>
	</div>
	<nav id="toc">
	</nav>
	<h2 class="link-to-map">Titre de deuxième niveau (1)</h2>
	<p>Maecenas suscipit interdum nulla et mattis. Sed sapien felis, suscipit scelerisque fermentum non, consequat ac mi. Proin nec diam eros. Nulla malesuada varius dui, eu condimentum elit mollis eget. Duis pellentesque iaculis nulla, at suscipit dui posuere non. Aliquam finibus diam nulla, a efficitur eros placerat ut. Aenean vulputate lacinia mauris eget accumsan.</p>
	<p>Quisque convallis elit ut dolor scelerisque, eu elementum nulla egestas. Aenean a semper dolor, et gravida turpis. Quisque sagittis est nec turpis rhoncus, sit amet elementum elit sagittis. Sed a facilisis dolor. Etiam libero risus, imperdiet non nunc quis, semper rutrum est. Curabitur eget eros tempus, hendrerit diam sit amet, tempus felis. Sed eget justo vitae est sodales scelerisque nec nec erat. Nunc nec venenatis nisi. Integer ut neque et neque pellentesque sollicitudin. Vivamus ut dignissim nisl, ac lacinia nisi. In pharetra mi ac ex imperdiet posuere. Quisque eu porta sem. Nunc nisl nibh, posuere ut luctus in, volutpat quis odio. Donec at velit turpis.</p>
	<h3 class="link-to-map">Titre de troisième niveau (2)</h3>
	<p>Maecenas suscipit interdum nulla et mattis. Sed sapien felis, suscipit scelerisque fermentum non, consequat ac mi. Proin nec diam eros. Nulla malesuada varius dui, eu condimentum elit mollis eget. Duis pellentesque iaculis nulla, at suscipit dui posuere non. Aliquam finibus diam nulla, a efficitur eros placerat ut. Aenean vulputate lacinia mauris eget accumsan.</p>
	<p>Quisque convallis elit ut dolor scelerisque, eu elementum nulla egestas. Aenean a semper dolor, et gravida turpis. Quisque sagittis est nec turpis rhoncus, sit amet elementum elit sagittis. Sed a facilisis dolor. Etiam libero risus, imperdiet non nunc quis, semper rutrum est. Curabitur eget eros tempus, hendrerit diam sit amet, tempus felis. Sed eget justo vitae est sodales scelerisque nec nec erat. Nunc nec venenatis nisi. Integer ut neque et neque pellentesque sollicitudin. Vivamus ut dignissim nisl, ac lacinia nisi. In pharetra mi ac ex imperdiet posuere. Quisque eu porta sem. Nunc nisl nibh, posuere ut luctus in, volutpat quis odio. Donec at velit turpis.</p>
	<h3 class="link-to-map">Titre de troisième niveau (3)</h3>
	<p>Maecenas suscipit interdum nulla et mattis. Sed sapien felis, suscipit scelerisque fermentum non, consequat ac mi. Proin nec diam eros. Nulla malesuada varius dui, eu condimentum elit mollis eget. Duis pellentesque iaculis nulla, at suscipit dui posuere non. Aliquam finibus diam nulla, a efficitur eros placerat ut. Aenean vulputate lacinia mauris eget accumsan.</p>
	<p>Quisque convallis elit ut dolor scelerisque, eu elementum nulla egestas. Aenean a semper dolor, et gravida turpis. Quisque sagittis est nec turpis rhoncus, sit amet elementum elit sagittis. Sed a facilisis dolor. Etiam libero risus, imperdiet non nunc quis, semper rutrum est. Curabitur eget eros tempus, hendrerit diam sit amet, tempus felis. Sed eget justo vitae est sodales scelerisque nec nec erat. Nunc nec venenatis nisi. Integer ut neque et neque pellentesque sollicitudin. Vivamus ut dignissim nisl, ac lacinia nisi. In pharetra mi ac ex imperdiet posuere. Quisque eu porta sem. Nunc nisl nibh, posuere ut luctus in, volutpat quis odio. Donec at velit turpis.</p>
	<h4 class="link-to-map">Titre de quatrième niveau (4)</h4>
	<p>Maecenas suscipit interdum nulla et mattis. Sed sapien felis, suscipit scelerisque fermentum non, consequat ac mi. Proin nec diam eros. Nulla malesuada varius dui, eu condimentum elit mollis eget. Duis pellentesque iaculis nulla, at suscipit dui posuere non. Aliquam finibus diam nulla, a efficitur eros placerat ut. Aenean vulputate lacinia mauris eget accumsan.</p>
	<p>Quisque convallis elit ut dolor scelerisque, eu elementum nulla egestas. Aenean a semper dolor, et gravida turpis. Quisque sagittis est nec turpis rhoncus, sit amet elementum elit sagittis. Sed a facilisis dolor. Etiam libero risus, imperdiet non nunc quis, semper rutrum est. Curabitur eget eros tempus, hendrerit diam sit amet, tempus felis. Sed eget justo vitae est sodales scelerisque nec nec erat. Nunc nec venenatis nisi. Integer ut neque et neque pellentesque sollicitudin. Vivamus ut dignissim nisl, ac lacinia nisi. In pharetra mi ac ex imperdiet posuere. Quisque eu porta sem. Nunc nisl nibh, posuere ut luctus in, volutpat quis odio. Donec at velit turpis.</p>
	<h4 class="link-to-map">Titre de quatrième niveau (5)</h4>
	<p>Maecenas suscipit interdum nulla et mattis. Sed sapien felis, suscipit scelerisque fermentum non, consequat ac mi. Proin nec diam eros. Nulla malesuada varius dui, eu condimentum elit mollis eget. Duis pellentesque iaculis nulla, at suscipit dui posuere non. Aliquam finibus diam nulla, a efficitur eros placerat ut. Aenean vulputate lacinia mauris eget accumsan.</p>
	<p>Quisque convallis elit ut dolor scelerisque, eu elementum nulla egestas. Aenean a semper dolor, et gravida turpis. Quisque sagittis est nec turpis rhoncus, sit amet elementum elit sagittis. Sed a facilisis dolor. Etiam libero risus, imperdiet non nunc quis, semper rutrum est. Curabitur eget eros tempus, hendrerit diam sit amet, tempus felis. Sed eget justo vitae est sodales scelerisque nec nec erat. Nunc nec venenatis nisi. Integer ut neque et neque pellentesque sollicitudin. Vivamus ut dignissim nisl, ac lacinia nisi. In pharetra mi ac ex imperdiet posuere. Quisque eu porta sem. Nunc nisl nibh, posuere ut luctus in, volutpat quis odio. Donec at velit turpis.</p>
	<h2 class="link-to-map">Titre de deuxième niveau (6)</h2>
	<p>Maecenas suscipit interdum nulla et mattis. Sed sapien felis, suscipit scelerisque fermentum non, consequat ac mi. Proin nec diam eros. Nulla malesuada varius dui, eu condimentum elit mollis eget. Duis pellentesque iaculis nulla, at suscipit dui posuere non. Aliquam finibus diam nulla, a efficitur eros placerat ut. Aenean vulputate lacinia mauris eget accumsan.</p>
	<p>Quisque convallis elit ut dolor scelerisque, eu elementum nulla egestas. Aenean a semper dolor, et gravida turpis. Quisque sagittis est nec turpis rhoncus, sit amet elementum elit sagittis. Sed a facilisis dolor. Etiam libero risus, imperdiet non nunc quis, semper rutrum est. Curabitur eget eros tempus, hendrerit diam sit amet, tempus felis. Sed eget justo vitae est sodales scelerisque nec nec erat. Nunc nec venenatis nisi. Integer ut neque et neque pellentesque sollicitudin. Vivamus ut dignissim nisl, ac lacinia nisi. In pharetra mi ac ex imperdiet posuere. Quisque eu porta sem. Nunc nisl nibh, posuere ut luctus in, volutpat quis odio. Donec at velit turpis.</p>
	<h2 class="link-to-map">Titre de deuxième niveau (7)</h2>
	<p>Maecenas suscipit interdum nulla et mattis. Sed sapien felis, suscipit scelerisque fermentum non, consequat ac mi. Proin nec diam eros. Nulla malesuada varius dui, eu condimentum elit mollis eget. Duis pellentesque iaculis nulla, at suscipit dui posuere non. Aliquam finibus diam nulla, a efficitur eros placerat ut. Aenean vulputate lacinia mauris eget accumsan.</p>
	<p>Quisque convallis elit ut dolor scelerisque, eu elementum nulla egestas. Aenean a semper dolor, et gravida turpis. Quisque sagittis est nec turpis rhoncus, sit amet elementum elit sagittis. Sed a facilisis dolor. Etiam libero risus, imperdiet non nunc quis, semper rutrum est. Curabitur eget eros tempus, hendrerit diam sit amet, tempus felis. Sed eget justo vitae est sodales scelerisque nec nec erat. Nunc nec venenatis nisi. Integer ut neque et neque pellentesque sollicitudin. Vivamus ut dignissim nisl, ac lacinia nisi. In pharetra mi ac ex imperdiet posuere. Quisque eu porta sem. Nunc nisl nibh, posuere ut luctus in, volutpat quis odio. Donec at velit turpis.</p>
	<h2 class="link-to-map">Titre de deuxième niveau (8)</h2>
	<p>Maecenas suscipit interdum nulla et mattis. Sed sapien felis, suscipit scelerisque fermentum non, consequat ac mi. Proin nec diam eros. Nulla malesuada varius dui, eu condimentum elit mollis eget. Duis pellentesque iaculis nulla, at suscipit dui posuere non. Aliquam finibus diam nulla, a efficitur eros placerat ut. Aenean vulputate lacinia mauris eget accumsan.</p>
	<p>Quisque convallis elit ut dolor scelerisque, eu elementum nulla egestas. Aenean a semper dolor, et gravida turpis. Quisque sagittis est nec turpis rhoncus, sit amet elementum elit sagittis. Sed a facilisis dolor. Etiam libero risus, imperdiet non nunc quis, semper rutrum est. Curabitur eget eros tempus, hendrerit diam sit amet, tempus felis. Sed eget justo vitae est sodales scelerisque nec nec erat. Nunc nec venenatis nisi. Integer ut neque et neque pellentesque sollicitudin. Vivamus ut dignissim nisl, ac lacinia nisi. In pharetra mi ac ex imperdiet posuere. Quisque eu porta sem. Nunc nisl nibh, posuere ut luctus in, volutpat quis odio. Donec at velit turpis.</p>
	<script>
	/*
	http://jscc.info/
	http://jshint.com/ ou http://closure-compiler.appspot.com/home */
	var html = document.querySelector('html');
	html.classList.add('js');
	html.classList.remove('no-js');
	var checkSupportDom = document.querySelector('#no-support-dom');
	checkSupportDom.parentNode.removeChild(checkSupportDom); /* Supprime le contenu de l'élément si la propriété est supportée.*/
	var title = document.createElement('h2');
	var text = document.createTextNode('Table des matières');
	title.appendChild(text);
	document.querySelector('#toc').appendChild(title);
	var ul = document.createElement('ul');
	var entries = document.querySelectorAll('.link-to-map'); /* Avec 'i', la casse est ignorée. */
	for (var i = 0; i < entries.length; ++i) {
	entries[i].setAttribute('id', 'link-to-map' + i);
	var li = document.createElement('li');
	var tagFrom = entries[i].tagName.toLowerCase();
	var tag = document.createElement(tagFrom);
	var link = document.createElement('a');
	link.setAttribute('href', '#link-to-map' + i);
	var text = document.createTextNode(entries[i].textContent);
	link.appendChild(text);
	tag.appendChild(link);
	li.appendChild(tag);
	ul.appendChild(li);
	}
	document.querySelector('#toc').appendChild(ul);
	</script>
	</body>
	</html>