Multiple document.createElement with eventListeners in One Function Return?

I have a function that returns something into the dom (a cellrenderer in ag-grid). Is it possible to create two different elements with document.createElement(), attach event listeners with addEventListener(), and return them in a single function?

For instance, this works, but I need to return two elements:

function() {

  var el = document.createElement('input');

  el.addEventListener('click', function () {
       console.log("el clicked");
  });

  return el;

}

//returns <input/> into the dom, and attaches eventlistener

Here is what I'm trying to do. The only way I have been able to get it to return html is by adding outerHTML methods on the return, but it doesn't seem to add the event listeners that way. If you take off .outerHTML it will return [object HTMLInputElement][object HTMLButtonElement]

function() {

  var el = document.createElement('input');
  var el2 = document.createElement('button');

  el.addEventListener('click', function () {
       console.log("el clicked");
  });
  el2.addEventListener('click', function () {
       console.log("el2 clicked");
   });

  return el.outerHTML + el2.outerHTML

}

//want this to return <input/><button/> with eventlisteners attached

Copyright Notice：Content Author:「AnotherMike」，Reproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article：https://stackoverflow.com/questions/35567937/multiple-document-createelement-with-eventlisteners-in-one-function-return