[英]Add <br> in HTML with the help of JavaScript
我試圖在我的每個未隱藏的表單字段之后添加兩個“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 並且出現了一些錯誤。
您可以使用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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.