El problema es que su bucle agrega la flecha al final de cada elemento de la matriz.

Para solucionar el problema, puede usar map() para envolver cada elemento en un span y luego usar join() por separado para combinar cada elemento en una sola cadena con la imagen de la flecha entre ellos.

Además, no ponga estilo en línea en su HTML, especialmente cuando ese HTML está en su JS. Use una hoja de estilo separada para aplicar estilo al contenido. Además, no hay ningún elemento <bold /> en HTML. Utilice CSS para aplicar font-weight al elemento i en su lugar.

Aquí hay un ejemplo de trabajo:

 let network = ['ABC', 'DES', 'FDD', 'BGR']; let html = network.map(item => `<span>${item}</span>`); document.querySelector('#foo').innerHTML = html.join(`<i class="fa fa-long-arrow-right"></i>`);

 #foo span { border: 3px dotted #399bff; } #foo i { color: #d77300; font-weight: bold; }

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <div id="foo"></div>

Muestra la salida normalmente sin la flecha. Compruebe si no es el último índice, agregue la flecha; de lo contrario; saltar la flecha.

 for (i=0;i<network.length;i++){ temp = "<span style = 'border:3px dotted #399bff;'>" + network[i] + "</span>"; if (i !== network.length-1){ temp += "<bold style = 'color : #d77300;'> <i class='fa fa-long-arrow-right'></i></bold>" } network[i] = temp; }

Procese el primer elemento. y agregue los elementos subsiguientes con las flechas primero.

 network=['aaa','bbb','ccc','ddd']; network[0] = "<span style = 'border:3px dotted #399bff;'>" + network[0]; for (i=1;i<network.length;i++){ temp ="</span><bold style = 'color : #d77300;'> <i> --></i></bold>"+"<span style = 'border:3px dotted #399bff;'>" + network[i]; network[i] = temp; } document.write(network);