En primer lugar, puede obtener el contenido de una clase HTML en particular copiando el valor en una variable y luego inyectar este valor asignando el valor de la variable copiada en el valor de entrada. Puede lograr esto usando JavaScript Vanilla simple.

Dado que su etiqueta p inicialmente está vacía y los datos se inyectan en la etiqueta p después de obtenerlos de una red, este proceso se convierte en una tarea asíncrona. Por lo tanto, querrá alimentar los datos solo después de que se hayan obtenido, por lo que puede agregar la lógica de asignación de valor dentro de la función de obtención de la siguiente manera:

 var ipinfo; $.getJSON("https://ipinfo.io", function (data) { document.querySelector("#details").innerHTML = data.ip const inject = document.querySelectorAll("input[type=text]")[0] //Identify the input element inject.value = data.ip //Assign the returned value to input's value. })

Como desea que el valor devuelto por fetch se alimente al contenido de la etiqueta p , así como al valor de la etiqueta de entrada, puede asignarlo directamente, en lugar de copiar sobre el valor ya copiado.

Por lo que puedo ver, solo necesitas un token.

Además, he usado el método de búsqueda ES6 para obtener la respuesta del objeto API

 fetch('https://ipinfo.io/json?token=e0b12a7d02537a').then( (response) => response.json() ).then( (jsonResponse) => { //this will display the IP as ap elemenet text $('#details').html('IP Address = ' + jsonResponse.ip) //here we are assigning it as a value to the input $('input[name="ip"]').val(jsonResponse.ip); } )

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p id='details'></p> <input type="text" name="ip" class="" readonly>