Read an XML from HTML and apply them directly in the view

I am trying to load an XML to a view and that with JS I read it and the tags use them directly in several inputs that exist in that same view, and everything I want to do from the client. If someone can help me.

It is a form that must be filled out based on an XML

In the HTML I have a normal input and a div where to put the information inside as evidence

<input type="file" id="file-input" />
<div id="contenido-archivo"></div>

In the JS I have the following to read it and place it directly in a div and it works to grab all the content of the XML and display it in the DIV, but I want to grab each tag of the XML and use it in other inputs that exist in the form

<script type="text/javascript">
function leerArchivo(e) {
  var archivo = e.target.files[0];
  if (!archivo) {
    return;
  }
  var lector = new FileReader();
  lector.onload = function (e) {
    var contenido = e.target.result;
    mostrarContenido(contenido);
  };
  lector.readAsText(archivo);
}
function mostrarContenido(contenido) {
  var elemento = document.getElementById('contenido-archivo');
  elemento.innerHTML = contenido;
}
document.getElementById('file-input')
  .addEventListener('change', leerArchivo, false);
</script>

Part of the XML is this

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<factura xmlns:ns2="http://www.w3.org/2000/09/xmldsig#" id="comprobante" version="2.1.0">
<infoTributaria>
<codDoc>01</codDoc>
</infoTributaria>
</factura>