我正在写一个页面，使用户可以输入简历。我为他们提供了一个标准的html表单，其中包含常用的基本信息（名称，地址等）。然后，为了获得大专学历和工作经验，我提供了一组相关的字段，并提供了一个选项，可以通过分别执行脚本addTerciario（）和addExp（）的按钮添加更多字段。
我的问题是执行脚本时，我松开了页面的底部（所有位于范围末尾以下的内容都带有id =“ experienciaspan”）。这种情况发生在chrome和edge（尚未测试其他浏览器）中。
我将所有花哨的CSS和其他javascript剥离到一个基本的html文档中，并且这种情况仍在发生。
我放置了一个控制台日志以输出文档的innerhtml，它就在那里，包括添加的字段和页面的底部，但未呈现！
对我在这里做错的任何想法吗？
以下是我的html和javascript。内容是西班牙语，但它是非常基本的内容，因此希望您在阅读时不会有任何问题。
<html>
<head>
<title>Trabajá con nosostros</title>
<meta charset="UTF-8">
</HEAD>
<body>
<p>Trabajá con nosotros</p>
<hr/>
<p> Completá este formulario con tus datos para incorporarte a nuestra base de datos de postulantes. Nos comunicaremos contigo cuando haya un puesto acorde a tu info.</p>
<form class="curriculumform" name="formulario">
<!-- This is where the basic info is entered -->
<span id="terciariaspan">
<p>Terciaria/universitaria:<select name="terciaria"><option value="completa">Completa</option><option value="parcial">Parcial</option><option value="sin">Ninguna</option></select> <span id="TerciariaGradoParcial" >Último año cursado:<input type="number" name="terciario_parcial_grado" min="1" max="7" value="1"/></span>
<p>Carrera: <input name="carrera">
<p>Comentario (opcional) <input name="terciaria_comentario" height="2"></p>
</span>
<hr/>
<p><button type="button" onclick="addTerciario()">+ Agregar educación terciara/universitaria</button>
<h3>Experiencia laboral</h3><p>(De más reciente a más antigua)</p>
<p>¿Estás trabajando acualmente? <select name="trabajando"><option value="si">Sí</option><option value="no">No</option></select>
<hr/>
<span id="experienciaspan">
<p>Empresa <input name="empresa">
<p>Puesto <input name="puesto">
<p>Desde <input type="date" name="expdesde"/> Hasta <input type="date" name="exphasta"/>
<p> Referencia (opcional) <input name="referencia"/>
</span>
<hr/>
<p><button type="button" onclick="addExp();">+ Agregar experiencia</button>
</form>
<p>.</p>
</body>
<script>
function addTerciario(){
val1=Array.from(document.getElementsByName("terciaria"));
val2=Array.from(document.getElementsByName("terciario_parcial_grado"));
val3=Array.from(document.getElementsByName("terciaria_comentario"));
val4=Array.from(document.getElementsByName("carrera"));
var n=val4.length;
var html="";
for(var i=0;i<n;i++){
v1=val1[i].value;
v2=val2[i].value;
v3=val3[i].value;
v4=val4[i].value;
html+='<p>Terciaria/universitaria:<select name="terciaria" value="'+v1+'"><option value="completa">Completa</option><option value="parcial">Parcial</option><option value="sin">Ninguna</option></select> <span id="TerciariaGradoParcial" >Último año cursado:<input type="number" name="terciario_parcial_grado" value="'+v2+'" min="1" max="7" value="1"/></span><p>Carrera: <input name="carrera" value="'+v4+'"><p>Comentario (opcional) <input name="terciaria_comentario" value="'+v3+'" height="2"></p>';
}
html+='<p>Terciaria/universitaria:<select name="terciaria"><option value="completa">Completa</option><option value="parcial">Parcial</option><option value="sin">Ninguna</option></select> <span id="TerciariaGradoParcial" >Último año cursado:<input type="number" name="terciario_parcial_grado" min="1" max="7" value="1"/></span><p>Carrera: <input name="carrera" ><p>Comentario (opcional) <input name="terciaria_comentario" height="2"></p>';
document.getElementById("experienciaspan").innerHTML="";
document.getElementById("experienciaspan").innerHTML=html;
}
function addExp(){
val1=Array.from(document.getElementsByName("empresa"));
val2=Array.from(document.getElementsByName("puesto"));
val3=Array.from(document.getElementsByName("expdesde"));
val4=Array.from(document.getElementsByName("exphasta"));
val5=Array.from(document.getElementsByName("referencia"));
var n=val2.length;
var html="";
for(var i=0;i<n;i++){
v1=val1[i].value;
v2=val2[i].value;
v3=val3[i].value;
v4=val4[i].value;
v5=val5[i].value;
html+='<p>Empresa <input name="empresa" value="'+v1+'"></p><p>Puesto <input name="puesto" value="'+v2+'"></p><p>Desde <input type="date" value="'+v3+'" name="expdesde"/> Hasta <input type="date" value="'+v4+'" name="exphasta"/></p><p> Referencia (opcional) <input name="referencia" value="'+v5+'"/></p>';
}
html+='<p>Empresa <input name="empresa"></p><p>Puesto <input name="puesto"></p><p>Desde <input type="date" name="expdesde"/> Hasta <input type="date" name="exphasta"/></p><p> Referencia (opcional) <input name="referencia"/></p>';
document.getElementById("experienciaspan").innerHTML="";
document.getElementById("experienciaspan").innerHTML=html;
console.log(document.documentElement.innerHTML);
}
</script>
</html>
我希望执行addExp（）函数时，名称为“ empresa”，“ puesto”，“ expdesde”，“ exphasta”和“ referencia”的一组新字段将出现在范围“ experienciaspan”中，保留用户先前输入的所有值。 这确实发生了，但具有使上述跨度以下的所有内容消失的副作用。 完全奇怪的是，在执行脚本addTerciario（）时也会发生这种情况，该脚本与跨度“ experienciaspan”无关。
答案 0 :(得分：0)
问题是所有未关闭的p标签。设置innerHTML会删除页面的其余部分，因为跨度内第一个未封闭的p之后的所有内容都被视为在跨度内。这是所有p标签都关闭的html：
<p>Trabajá con nosotros</p>
<hr/>
<p> Completá este formulario con tus datos para incorporarte a nuestra base de datos de postulantes. Nos comunicaremos contigo cuando haya un puesto acorde a tu info.</p>
<form class="curriculumform" name="formulario">
<!-- This is where the basic info is entered -->
<span id="terciariaspan">
<p>Terciaria/universitaria:<select name="terciaria"><option value="completa">Completa</option><option value="parcial">Parcial</option><option value="sin">Ninguna</option></select> <span id="TerciariaGradoParcial" >Último año cursado:<input type="number" name="terciario_parcial_grado" min="1" max="7" value="1"/></span></p>
<p>Carrera: <input name="carrera"> </p>
<p>Comentario (opcional) <input name="terciaria_comentario" height="2"></p>
</span>
<hr/>
<p><button type="button" onclick="addTerciario()">+ Agregar educación terciara/universitaria</button> </p>
<h3>Experiencia laboral</h3> <p>(De más reciente a más antigua)</p>
<p>¿Estás trabajando acualmente? <select name="trabajando"><option value="si">Sí</option><option value="no">No</option></select> </p>
<hr/>
<span id="experienciaspan">
<p>Empresa <input name="empresa"> </p>
<p>Puesto <input name="puesto"> </p>
<p>Desde <input type="date" name="expdesde"/> Hasta <input type="date" name="exphasta"/> </p>
<p> Referencia (opcional) <input name="referencia"/> </p>
</span>
<hr/>
<p><button type="button" onclick="addExp();">+ Agregar experiencia</button> </p>
</form>
<p>.</p>