title: input to add on a div only if it has value
body: <p>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 <p> that contains that color if the value is null.</p>
  <p>This is the html</p>
  <pre><code>&lt;div class=&quot;container shadow col-lg-6&quot;&gt;
        &lt;div id=&quot;contenido&quot; class=&quot;pb-auto&quot; style=&quot;display: none&quot;&gt;
          &lt;header class=&quot;p-3 bg-info text-white text-uppercase rounded&quot;&gt;
            &lt;h1 class=&quot;text-center&quot;&gt;Cotiza tu auto aqui&lt;/h1&gt;
          &lt;/header&gt;
          &lt;form class=&quot;mt-10 max-width mx-auto&quot; action=&quot;#&quot; id=&quot;cotizar-seguro&quot;&gt;
            &lt;div class=&quot;d-flex align-items-center mb-5&quot;&gt;
              &lt;label class=&quot;font-weight-bold text-uppercase mr-3 w-20&quot; for=&quot;marca&quot;&gt;Marca:&lt;/label&gt;
              &lt;select class=&quot;d-flex mt-2 p-3 rounded&quot; id=&quot;marca&quot;&gt;
                &lt;option value=&quot;&quot; disabled selected&gt; Seleccionar &lt;/option&gt;
              &lt;/select&gt;
              &lt;label class=&quot;font-weight-bold text-uppercase ml-auto mr-3 w-20&quot; for=&quot;marca&quot;&gt;Modelo:&lt;/label&gt;
              &lt;select class=&quot;d-flex mt-2 p-3 rounded&quot; id=&quot;modelo&quot;&gt;
                &lt;option value=&quot;&quot; disabled selected&gt; Seleccionar &lt;/option&gt;
              &lt;/select&gt;
            &lt;/div&gt;
            &lt;div class=&quot;d-flex justify-content-around align-items-center mb-5&quot;&gt;
              &lt;label class=&quot;font-weight-bold text-uppercase mr-3 w-20&quot; for=&quot;year&quot;&gt;Año:&lt;/label&gt;
              &lt;select class=&quot;d-flex p-3 rounded&quot; id=&quot;year&quot;&gt;
                &lt;option value=&quot;&quot; disabled selected&gt; Seleccionar &lt;/option&gt;
              &lt;/select&gt;
              &lt;label class=&quot;font-weight-bold text-uppercase ml-auto mr-3&quot; for=&quot;color&quot;&gt;Color:&lt;/label&gt;
              &lt;input type=&quot;text&quot; class=&quot;d-flex p-3 rounded&quot; id=&quot;color&quot; placeholder=&quot;El color es opcional&quot;&gt;
            &lt;/div&gt;
            &lt;fieldset&gt;
              &lt;legend class=&quot;font-weight-bold text-uppercase text-center w-full&quot;&gt;Tipo Seguro&lt;/legend&gt;    
              &lt;div class=&quot;d-flex justify-content-around mt-5&quot;&gt;
                &lt;div&gt;
                  &lt;label class=&quot;font-weight-bold text-uppercase mr-2&quot;&gt;Terceros&lt;/label&gt;
                  &lt;input type=&quot;radio&quot; name=&quot;tipo&quot; value=&quot;terceros&quot; checked&gt;
                  &lt;/label&gt;
                &lt;/div&gt;
                &lt;div&gt;
                  &lt;label class=&quot;font-weight-bold  text-uppercase mr-2&quot;&gt;Terceros Ampliada&lt;/label&gt;
                  &lt;input type=&quot;radio&quot; name=&quot;tipo&quot; value=&quot;terceros-ampliada&quot;&gt;
                  &lt;/label&gt;
                &lt;/div&gt;
                &lt;div&gt;
                  &lt;label class=&quot;font-weight-bold  text-uppercase mr-2&quot;&gt;Todo Riesgo&lt;/label&gt;
                  &lt;input type=&quot;radio&quot; name=&quot;tipo&quot; value=&quot;todo-riesgo&quot;&gt;
                  &lt;/label&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/fieldset&gt;    
     
            &lt;div id=&quot;resultado&quot;&gt;&lt;/div&gt;
            &lt;div class=&quot;d-flex justify-content-center py-4&quot;&gt;
              &lt;button type=&quot;submit&quot;
                  class=&quot;mx-auto bg-info hover text-white font-weight-bold py-2 px-20 rounded&quot;&gt;Cotizar Seguro
              &lt;/button&gt;
            &lt;/div&gt;
      
          &lt;/form&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  <p>This is the JavaScript</p>
  <pre><code> var colorin = document.querySelector('#color');
    const div = document.createElement('div');
      div.classList.add('mt-10');
    
      div.innerHTML = `
        &lt;p class=&quot;header&quot;&gt;Resumen de Cotización para ${datosJSON.nombre}&lt;/p&gt;
        &lt;p class=&quot;font-italic&quot;&gt;Marca: ${marca.toUpperCase().replace('-', ' ')} &lt;/p&gt;
        &lt;p class=&quot;font-italic&quot;&gt;Modelo: ${modelo.toUpperCase().replace('-', ' ')}  &lt;/p&gt;
        &lt;p class=&quot;font-italic&quot;&gt;Año: ${year} &lt;/p&gt;
        &lt;p class=&quot;font-italic&quot;&gt;Color: ${colorin.value.toUpperCase()} &lt;/p&gt;
        &lt;p class=&quot;font-italic&quot;&gt;Suma Asegurada: ${formatoPrecio.format(precio)}  &lt;/p&gt;
        &lt;p class=&quot;font-italic&quot;&gt;Tipo de Cobertura: ${tipo.toUpperCase().replace('-', ' ')}  &lt;/p&gt;
        &lt;p class=&quot;font-italic&quot;&gt;Suma Asegurada: ${formatoPoliza.format(valorPoliza)}  &lt;/p&gt;
        `; 
  </code></pre>