Generating an HTML list out of page headings in JavaScript

Generating an unordered HTML list out of the current page H1—H6 headings in JavaScript. Two ways, using the following methods:

1. insertAdjacentHTML()
2. createElement()

insertAdjacentHTML()

HTML code:

<div class="example"></div>

JavaScript code:

<script>
window.addEventListener('DOMContentLoaded', function() {

var headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6');

document.querySelector('.example').insertAdjacentHTML('afterbegin', '<ul>');
for ( var i = 0; i < headings.length; i++ ) {
	document.querySelector('.example > ul').insertAdjacentHTML('beforeend', '<li>' + headings[i].textContent + '</li>');
};
document.querySelector('.example').insertAdjacentHTML('beforeend', '</ul>');

});
</script>

createElement()

HTML code:

<div class="example example2"></div>

JavaScript code:

<script>
window.addEventListener('DOMContentLoaded', function() {

var headings2 = document.querySelectorAll('h1, h2, h3, h4, h5, h6');

var ul = document.createElement('ul');
document.querySelector('.example2').appendChild( ul );

for ( var i = 0; i < headings2.length; i++ ) {
	var li = document.createElement('li');
	li.textContent = headings2[i].textContent;
	ul.appendChild( li );
};

});
</script>

Links

1. Element: insertAdjacentHTML() method: developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML
2. Document: createElement() method: developer.mozilla.org/en-US/docs/Web/API/Document/createElement
3. Document: DOMContentLoaded event: developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event
4. Advantages of createElement over innerHTML?: stackoverflow.com/questions/2946656/advantages-of-createelement-over-innerhtml
5. innerHTML vs insertAdjacentHTML vs appendChild vs insertAdjacentElement: measurethat.net/Benchmarks/Show/16493/1/innerhtml-vs-insertadjacenthtml-vs-appendchild-vs-inser

Browser support

Windows

Internet Explorer 9.0+

Edge 17.0+

Firefox 8.0+

Google Chrome 1.0+

Opera 10.0+

Safari 4.0+

Linux

Firefox 8.0+

Google Chrome / Chromium

Opera 10.0+

iOS

Safari 4.0+ : insertAdjacentHTML()

Safari 1.0+ : createElement()

Android

Samsung Internet 1.0+

Chrome 18.0+

Firefox 8.0+ : insertAdjacentHTML()

Firefox 4.0+ : createElement()

Opera 10.1+

More

• Accessing the first element in forEach loop (JavaScript)
• Adding a class to all sibling elements of a specific type in JavaScript
• Append an element after a specific element in JavaScript
• Array to string in JavaScript
• Calculate sum of HTML table column in JavaScript
• Detecting a newly generated element and adding a class to it in JavaScript
• Detect if a class has been added (JavaScript)
• Get the current URL in JavaScript
• Getting the last class name in classList collection
• Removing the last character from a string in Javascript
• Transliterating Russian to English in JavaScript
• Wrap each character of a string in <span> tag (JavaScript)
• Wrap each word of text in <span> tag (JavaScript)
• Wrap the first word of text in <span> tag (JavaScript)