How to scroll options in a select list? question about an answer

Question

The original question was posted here : Set current item in a HTML <select>, but in the middle

In the question the author ask : "How to make that the selected item appears in the middle of the listview, or, alternatively, on top of the listview?"

This is a question about the amazing answer posted by @OstoneO !!! I didn't understand how his code worked at glance, so my code takes much more place, but this was the only solution to understand the code he posted.

especially here :

const selected = l.options[l.selectedIndex];
const intoView = (block = 'center') => selected.scrollIntoView({ block });
intoView();

So I spent a lot of time to write it "my way" and I'm nearly able now to understand what he did now.

So this is a question related to an answer...

I write my code first as a snippet, than the snippet of OstoneO.

Is it also correct to write it like here below, and I would like to know if this may result in a slower execution than in the second snippet (I imagine that yes)...

I was wondering if my function addElement() is really bad and if ``ìnnerHTML``` run faster than create elements then add them to the DOM?

I don't really understand what the option "nearest" means.

If I click "nearest" after "end" nothing seems to change, as well for "nearest" after "start" or "center".

To initialize the scroll position at start in my case, I'm forced to create another function initList(position) because I cannot call var type = this.name;nor var type = event.target.name; in initList(position) Is there a turnaround, a trick to avoid to add another function at start?

Could someone please help me to explain those details and why in this case it seems much efficient to use "onClick" than add Event Listeners to the buttons.

Here is my code snippet :

window.addEventListener("DOMContentLoaded",init);
let selectContainer,selector,selectionDisplay;
let selectorLength = 100;
let buttons;
let defaultScroll = "center";

function init(){
  selectContainer = document.getElementById("selectContainer");
  selector = document.getElementById("selector");
  selectionDisplay = document.getElementById("selectionDisplay");
  buttons = document.getElementById("buttons").getElementsByTagName("button");
  for(var i = 1; i<= selectorLength; i++){
    addElement (selector, i, i);
  }
  for (var j = 0; j < buttons.length; j++){
    buttons[j].addEventListener("click",intoView);
  }
  selector.value = 17;
  initList(defaultScroll);
  selector.addEventListener("change",getOptValue);
  getOptValue();
}
        
function addElement(target, value, textContent) {
  const newOption = document.createElement("option");
  newOption.value = value;
  const newContent = document.createTextNode("element " + textContent);
  newOption.appendChild(newContent); 
  target.appendChild(newOption);
  getOptValue();
}
        
function getOptValue(e){
  selectionDisplay.textContent = selector.value;
}
        
function intoView(event){
  var type = this.name;
  var selected = selector.options[selector.selectedIndex];
  selected.scrollIntoView({ block:this.name });
}
        
function initList(position){
  var type = position;
  var selected = selector.options[selector.selectedIndex];
  selected.scrollIntoView({ block:type });
}

  <div id="selectContainer">
    <select id="selector" size="7">
      <option value="null" disabled>select a value</option>
    </select>
  </div>
  <div id="buttons">
    <br>
    <button name="start">Start</button>
    <button name="center">Center</button>
    <button name="nearest">Nearest</button>
    <button name="end">End</button>
    <br>
  </div>
    
  <div id="selectionDisplay">
    default value   
  </div>

And here is the snippet posted by OstoneO...

var l = document.getElementById("list");
for (var i = 0; i < 100; i++) {
    l.innerHTML += "<option value='" + i + "'>" + i + "</option>";
}
l.value = 17;

// Demo
const selected = l.options[l.selectedIndex];
const intoView = (block = 'center') => selected.scrollIntoView({ block });
intoView();

#list { width: 100px; }

<select id="list" multiple size=10></select>

<!--  DEMO -->
<br />
<button onclick='intoView("start");'>Start</button>
<button onclick='intoView();'>Center</button>
<button onclick='intoView("nearest");'>Nearest</button>
<button onclick='intoView("end");'>End</button>
<!-- /DEMO -->

Have a nice day all, and best regards.