Create multiple elements in a for loop

The for loop seems to be incorrect. You might want to do: for(var i = 0, i < bouton.length; i++) { }

Also, you are assigning the created element back to the array and then accessing it to fill its text. Try using a local variable:

var bouton = ['title', 'h1', 'p', 'input']

function editerPage() {
    for (var i = 0; i < bouton.length; i++ ) {
        var btn = document.createElement('button');
        btn.innerHTML = 'Création du ' + bouton[i];
        btn.id = '"' + bouton[i] + '"';
        btn.setAttribute('onclick', '"' + bouton[i] + '"');
        document.body.appendChild(btn);
    }
}

editerPage()

You have made some errors:

• You overwrite bouton[i] with the created button-element and set this as innerHTML. Use a new variable for this.
• In the for-loop you used i >= bouton.length, so the loop will never be executed it had to be <.
• btn.id is just bouton[i] withoutb quotationmarks because the variable stores the string already.
• Better append the buttons to a wrapper-div and not to the body.
• The click-event has to be done by adding an eventListener with the "click" as event and a function that will be done. I add here just a log at the console because I don't have anything from you for this.

I extended your button-array. Every entry is now an object which contains all information for creating this tag. You could easily add new properties. If it's not allways necessary than test if the property is set before handle it at the new tag like I do it with type='color' which is only used for the input.

var bouton = [
  {id: 'title', tag: "button"},
  {id:'h1', tag: 'button'},
  {id: 'p', tag: 'button'},
  {id: 'input', tag: 'input', type: 'color', _click: 'couleurH1'}
];

editerPage();

function editerPage() {
    for ( let i = 0; i < bouton.length; i++ ) {
        let btn = document.createElement(bouton[i].tag);
        btn.innerHTML = 'Création du ' + bouton[i].id;
        btn.id = bouton[i].id;
    
        btn.addEventListener('click', function() {
            console.log(btn.id);
        });

        if (btn.type)
            btn.setAttribute('type', bouton[i].type);

        document.getElementById("wrapper").appendChild(btn);
    }
}

<div id="wrapper"></div>

A little late to the party but there is a cleaner and more efficient way to archive what you are trying:

const el = document.querySelector('#app');

el.addEventListener('click', () => {
  console.log(event.target);
});

el.innerHTML = `
<h1>Page Title</h1>
<p>Lorem, ipsum dolor.</p>
<input value="Lorem ipsum dolor sit." >
<button id="titre">Click Me</button>
`;

This way we touch the DOM once. Delegate elements creation to DOM, which is faster. We use event delegation, in other words we add single listener, again faster and more efficient. Remember, you can use target object to modify the clicked element:

el.addEventListener('click', () => {
  // Modify the element that received the click
  // You can use conditionals to check if the element
  // is the one you want to modify
  event.target.innerText = 'Hello';
});