借助 JavaScript 在 HTML 中添加 <br>

Question

我试图在我的每个未隐藏的表单字段之后添加两个“br”，否则，它会在我的表单中占用一些空间并且看起来不太好。 但是由于某种原因它没有出现。

<legend>Ética y Cumplimiento:</legend>
        <fieldset style="border: 1px solid #000;">
            <br>
            <div id="formulario3">
                {% for field in form3 %}
                    {% if field.flags.required %}
                        {{ field.label(text='*' + field.label.text) }}
                    {% else %}
                        {{ field.label }}
                    {% endif %}

                    {% if field.errors %}
                        {{ field(class="is-invalid") }}
                        <div class="invalid-feedback">
                            {% for error in field.errors %}
                                <span>{{ error }}</span>
                            {% endfor %}
                        </div>
                    {% else %}
                        {{ field(class="form-control") }}
                    {% endif %}

                    <script>
                        let elementoseleccionado = document.getElementById({{ field.id }});
                        if ((document.getElementById('{{ field.id }}')).type === 'hidden') {
                            $('label[for="{{ field.id }}"]').css('display', 'none');
                        }
                        else{
                            let linebreak = document.createElement("br");
                            elementoseleccionado.appendChild(linebreak);
                            elementoseleccionado.appendChild(linebreak);
                        }
                    </script>

                {% endfor %}

                <input type="button" class="btn btn-primary" id="morecumplimiento" value="Más">

                <br>
                <br>

            </div>

我的代码产生的错误是这样的：

生成的 HTML 是这个：

            <legend>Ética y Cumplimiento:</legend>
        <fieldset style="border: 1px solid #000;">
            <br>
            <div id="formulario3">
                
                    
                        <label for="exposicion_politica">* Indique si alguna persona mencionada en el presente formulario es/fue una Persona Expuesta Políticamente (PEP)</label>
                    

                    
                        <select class="form-control" id="exposicion_politica" name="exposicion_politica" required><option value="0">---</option><option value="SI">SI</option><option value="NO">NO</option></select>
                    

                    <script>
                        if ((document.getElementById('exposicion_politica')).type === 'hidden') {
                            $('label[for="exposicion_politica"]').css('display', 'none');
                        }
                        else{
                            let linebreak = document.createElement("br");
                            if ((document.getElementById('exposicion_politica')) !== null && (document.getElementById('exposicion_politica')).value === ''){
                                document.getElementById(exposicion_politica).appendChild(linebreak);
                                document.getElementById(exposicion_politica).appendChild(linebreak);
                            }

                        }
                    </script>

                
                    
                        <label for="ap_nom_etica1">*Apellidos y Nombres 1</label>
                    

                    
                        <input class="form-control" id="ap_nom_etica1" name="ap_nom_etica1" required type="text" value="">
                    

                    <script>
                        if ((document.getElementById('ap_nom_etica1')).type === 'hidden') {
                            $('label[for="ap_nom_etica1"]').css('display', 'none');
                        }
                        else{
                            let linebreak = document.createElement("br");
                            if ((document.getElementById('ap_nom_etica1')) !== null && (document.getElementById('ap_nom_etica1')).value === ''){
                                document.getElementById(ap_nom_etica1).appendChild(linebreak);
                                document.getElementById(ap_nom_etica1).appendChild(linebreak);
                            }

                        }
                    </script>

如您所见，没有生成 br 并且出现了一些错误。

Answer 1

您可以使用each 循环遍历您的输入并检查它是否可见，如果是，则使用.after 添加<br> 标签

演示代码：

$("select , input").each(function() {
  //check if visible
  if ($(this).is(":visible")) {
    //add br after that elements
    $(this).after("<br/><br/>")
  } else {
    //hide label
    $(this).prev().css('display', 'none');
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<legend>Ética y Cumplimiento:</legend>
<fieldset style="border: 1px solid #000;">
  <br>
  <div id="formulario3">
    <label for="exposicion_politica">* Indique si alguna persona mencionada en el presente formulario es/fue una Persona Expuesta Políticamente (PEP)</label>
    <select class="form-control" id="exposicion_politica" name="exposicion_politica" required>
      <option value="0">---</option>
      <option value="SI">SI</option>
      <option value="NO">NO</option>
    </select>
    <label for="ap_nom_etica1">*Apellidos y Nombres 1</label>
    <input class="form-control" id="ap_nom_etica1" name="ap_nom_etica1" required type="text" value="">
    <label for="">*Apellidos y Nom</label>
    <input class="form-control" name="ap_nom_etica1" required type="hidden" value="">
    <label for="">*Apellidos y Nom</label>
    <input class="form-control" name="ap_nom_etica1" required type="text" value="">
  </div>
</fieldset>

其他方法是直接选择输入并选择并添加 br 标签，而不是使用每个循环。

演示代码：

$("input:visible ,select:visible").after("<br/><br/>")
$("input:hidden ,select:hidden").prev().css('display', 'none');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<legend>Ética y Cumplimiento:</legend>
<fieldset style="border: 1px solid #000;">
  <br>
  <div id="formulario3">
    <label for="exposicion_politica">* Indique si alguna persona mencionada en el presente formulario es/fue una Persona Expuesta Políticamente (PEP)</label>
    <select class="form-control" id="exposicion_politica" name="exposicion_politica" required>
      <option value="0">---</option>
      <option value="SI">SI</option>
      <option value="NO">NO</option>
    </select>
    <label for="ap_nom_etica1">*Apellidos y Nombres 1</label>
    <input class="form-control" id="ap_nom_etica1" name="ap_nom_etica1" required type="text" value="">
    <label for="">*Apellidos y Nom</label>
    <input class="form-control" name="ap_nom_etica1" required type="hidden" value="">
    <label for="">*Apellidos y Nom</label>
    <input class="form-control" name="ap_nom_etica1" required type="text" value="">
  </div>
</fieldset>