HTML - Cargar datos a un modal bootstrap con JS

// llamo al modal desde el boton, el modal carga pero no logro pasar el valor para que se pinte
// LLAMADA Y MODAL

<div class="container">
<h2>Bootstrap 3.3.7 - Modal Demo</h2>

<div class="row text-center">
<h3>The Small Modal</h3>
<a href="#" class="btn btn-lg btn-danger" data-toggle="modal" data- target="#smallModal">Click to open Modal</a>
</div>

<div class="modal fade" id="smallModal" tabindex="-1" role="dialog" aria-labelledby="smallModal" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">

<button type="button" class="close" data-dismiss="modal" aria- hidden="true">× </button>

<h4 class="modal-title" id="myModalLabel">Small Modal</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="nombre" class="form-label"> Nombre </label>
<input type="text" name="nombre" id="nombre" >
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>

<p class="p">Demo by Syed Fazle Rahman. <a href="http://www.sitepoint.com/understanding-bootstrap-modals/" target="_blank">See article</a>.</p>



//// CODIGO EN JS


let editaModal=document.getElementById('smallModal')

editaModal.addEventListener('hide.bs.modal',event=>{
editaModal.querySelector('.modal-body #nombre').value=""

})
editaModal.addEventListener('shown.bs.modal',event => {
let button = event.relatedTarget
let id = button.getAttribute('data-id')
let inputNombre =editaModal.querySelector('.modal-body #nombre')
inputNombre.value='1' //data.nombre
})

Lo que pasa es que estás usando Bootstrap inferior a la edición 5 y, por lo tanto no soporta javascript para los elementos del DOM.
Lo que tienes que hacer es usar JQuery.


Tienes que incluir los scripts finales para que se puede cargar la librería JQuery.

En el caso de querer insertar los datos desde una base de datos, lo puedes hacer con fetch y un archivo externo que procese la consulta y te devuelva el resultado en un json.