在 JavaScript 的帮助下在 HTML 中添加 <br>

Question

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

<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>

其他方法是直接 select 输入 & select 并添加 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>

在 JavaScript 的帮助下在 HTML 中添加 <br>

Add <br> in HTML with the help of JavaScript

html

javascript

jquery

flask-wtforms