input to add on a div only if it has value

Question

I have a few inputs that I add the values of them in a div through javascript and that it is only if they inputs have values. But, there is one that is optional. I want that optional input (color) to be added to the div only if it has value, otherwise not to be included. The issue is that I want to not be display even the

that contains that color if the value is null.

This is the html

<div class="container shadow col-lg-6">
      <div id="contenido" class="pb-auto" style="display: none">
        <header class="p-3 bg-info text-white text-uppercase rounded">
          <h1 class="text-center">Cotiza tu auto aqui</h1>
        </header>
        <form class="mt-10 max-width mx-auto" action="#" id="cotizar-seguro">
          <div class="d-flex align-items-center mb-5">
            <label class="font-weight-bold text-uppercase mr-3 w-20" for="marca">Marca:</label>
            <select class="d-flex mt-2 p-3 rounded" id="marca">
              <option value="" disabled selected> Seleccionar </option>
            </select>
            <label class="font-weight-bold text-uppercase ml-auto mr-3 w-20" for="marca">Modelo:</label>
            <select class="d-flex mt-2 p-3 rounded" id="modelo">
              <option value="" disabled selected> Seleccionar </option>
            </select>
          </div>
          <div class="d-flex justify-content-around align-items-center mb-5">
            <label class="font-weight-bold text-uppercase mr-3 w-20" for="year">Año:</label>
            <select class="d-flex p-3 rounded" id="year">
              <option value="" disabled selected> Seleccionar </option>
            </select>
            <label class="font-weight-bold text-uppercase ml-auto mr-3" for="color">Color:</label>
            <input type="text" class="d-flex p-3 rounded" id="color" placeholder="El color es opcional">
          </div>
          <fieldset>
            <legend class="font-weight-bold text-uppercase text-center w-full">Tipo Seguro</legend>    
            <div class="d-flex justify-content-around mt-5">
              <div>
                <label class="font-weight-bold text-uppercase mr-2">Terceros</label>
                <input type="radio" name="tipo" value="terceros" checked>
                </label>
              </div>
              <div>
                <label class="font-weight-bold  text-uppercase mr-2">Terceros Ampliada</label>
                <input type="radio" name="tipo" value="terceros-ampliada">
                </label>
              </div>
              <div>
                <label class="font-weight-bold  text-uppercase mr-2">Todo Riesgo</label>
                <input type="radio" name="tipo" value="todo-riesgo">
                </label>
              </div>
            </div>
          </fieldset>    
   
          <div id="resultado"></div>
          <div class="d-flex justify-content-center py-4">
            <button type="submit"
                class="mx-auto bg-info hover text-white font-weight-bold py-2 px-20 rounded">Cotizar Seguro
            </button>
          </div>
    
        </form>
      </div>
    </div>

This is the JavaScript

 var colorin = document.querySelector('#color');
  const div = document.createElement('div');
    div.classList.add('mt-10');
  
    div.innerHTML = `
      <p class="header">Resumen de Cotización para ${datosJSON.nombre}</p>
      <p class="font-italic">Marca: ${marca.toUpperCase().replace('-', ' ')} </p>
      <p class="font-italic">Modelo: ${modelo.toUpperCase().replace('-', ' ')}  </p>
      <p class="font-italic">Año: ${year} </p>
      <p class="font-italic">Color: ${colorin.value.toUpperCase()} </p>
      <p class="font-italic">Suma Asegurada: ${formatoPrecio.format(precio)}  </p>
      <p class="font-italic">Tipo de Cobertura: ${tipo.toUpperCase().replace('-', ' ')}  </p>
      <p class="font-italic">Suma Asegurada: ${formatoPoliza.format(valorPoliza)}  </p>
      `; 

Answer 1

const colorElement = colorin.value ? 
'<p class="font-italic">Color: ${colorin.value.toUpperCase()} </p>' : '';

div.innerHTML = `
      <p class="header">Resumen de Cotización para ${datosJSON.nombre}</p>
      <p class="font-italic">Marca: ${marca.toUpperCase().replace('-', ' ')} </p>
      <p class="font-italic">Modelo: ${modelo.toUpperCase().replace('-', ' ')}  </p>
      <p class="font-italic">Año: ${year} </p>
      ${colorElement}
      <p class="font-italic">Suma Asegurada: ${formatoPrecio.format(precio)}  </p>
      <p class="font-italic">Tipo de Cobertura: ${tipo.toUpperCase().replace('-', ' ')}  </p>
      <p class="font-italic">Suma Asegurada: ${formatoPoliza.format(valorPoliza)}  </p>
      `; 

Answer 2

I just add an if statement at the bottom of the div.innerHTML and it works.

 var colorin = document.querySelector('#color');
  const div = document.createElement('div');
    div.classList.add('mt-10');
 
div.innerHTML = `
      <p class="header">Resumen de Cotización para ${datosJSON.nombre}</p>
      <p class="font-italic">Marca: ${marca.toUpperCase().replace('-', ' ')} </p>
      <p class="font-italic">Modelo: ${modelo.toUpperCase().replace('-', ' ')}  </p>
      <p class="font-italic">Año: ${year} </p>
      <p class="font-italic">Suma Asegurada: ${formatoPrecio.format(precio)}  </p>
      <p class="font-italic">Tipo de Cobertura: ${tipo.toUpperCase().replace('-', ' ')}  </p>
      <p class="font-italic">Suma Asegurada: ${formatoPoliza.format(valorPoliza)}  </p>
      `;   
    if (colorin.value.length > 0) {
      div.innerHTML += `<p class="font-italic">Color del auto: ${colorin.value.toUpperCase()} </p>`;
    };