适当缩放html并使用javascript/jquery添加新信息

我对javascript/jquery非常粗糙，在思考这段代码时遇到困难。 我使用PHP做了我想做的事情，但是当添加了一定数量的新条目时，它会导致html混乱

我在PHP中的代码：

 for($i = 0; $i < sizeof($educationArray[0]); $i++)
    {   
        echo "<div style=\"float:left; margin-right:50px; margin-bottom:30px; \">";
        echo "<label>Institution Name</label>";
        echo "<span>".$newarray[$i]['Institution']."</span>";
        echo "<label>Location</label>";
        echo "<span>".$newarray[$i]['Location']."</span>";
        echo "<label>Start Date</label>";
        echo "<span>".$newarray[$i]['StartDate']."</span>";
        echo "<label>End Date</label>";
        echo "<span>".$newarray[$i]['EndDate']."</span>";
        echo "<label>Degree</label>";
        echo "<span>".$newarray[$i]['Degree']."</span>";
        echo "<label>Date Received Degree</label>";
        echo "<span>".$newarray[$i]['DegreeDate']."</span>";
        echo "<label>GPA</label>";
        echo "<span>".$newarray[$i]['GPA']."</span>";

        echo "</div>";

    }

    ?>

for（$i=0；$i

我希望能够在javascript中自动完成这项工作。 我必须向数据库添加新信息的代码是：

    <h3 style="float:left;">Add Education</h3>
 <button style="float:left;" class="editInfoButtons" id="AddEducationButton"></button>
 <div style="float:left;" id="EducationInfo" class="modal-basicInfo">
           <div style="height:600px;width:260px;">
                <a title="Close" class="close">x</a>

 <form method="post" action="<?php echo $_SERVER['PHP_SELF'] . "?user=" . $userInfo['Id']; ?>" >


    <label for="InstitutionName">Institution Name: </label>
    <input type="text" name="schoolName" id="InstitutionName" />



    <label for="InstitutionLocation">Location: </label>
    <input type="text" name="schoolLocation" id="InstitutionLocation" />

  <br /><br />

    <label for="DatesAttended">Dates of Attendance</label>
    <input type="date" id="DateBegin" name="dateBegin"  />-<input type="date" name="dateEnd" id="DateEnd" />

    <br /><br />

    <label for="DegreeEarned">Degree Earned</label>
    <input id="DegreeEarned" name="DegreeEarned" type="text" />

    <label for="DateEarned">Date Earned: </label>
    <input style="float:left;" name="DateEarned" id="DateEarned" type="date" />

        <br />
        <br />

    <label for="GPA">GPA: </label>
    <input id="GPA" name="GPA" type="text" />



 <input type="submit" id="AddSchools" name="AddSchools" class="button" value="Add Institute" />
</form>
</div>

添加教育
x
在jQuery中，您可以使用ajax请求，然后执行一个成功的回调函数，并在div中预先添加（将新插入的信息放在顶部，将旧信息向下推）

让我给你一个在ajax方面的领先

$("#AddSchools").click(function(){
    $.ajax({
        type: "POST",
        url: "insert-to-db.php",
        data: { schoolName:$("#InstitutionName").val(),
                schoolLocation:$("#InstitutionLocation").val(),
                DateBegin:$("#DateBegin").val(),
                DegreeEarned:$("#DegreeEarned").val(),
                DateEarned:$("#DateEarned").val(),
                GPA:$("#GPA").val()
                } ,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(result){
         $("div").prepend("<label>Institution Name</label><br>"+$("#InstitutionName").val()+"(and so on...)");
        }
    });

});

$（“#添加学校”）。单击（函数（）{
$.ajax({
类型：“POST”，
url:“插入到db.php”，
数据：{schoolName:$（“#InstitutionName”）.val（），
学校地点：$（“#机构地点”）.val（），
DateBegin:$（“#DateBegin”）.val（），
脱脂：$（“#脱脂”）.val（），
DateEarned:$（“#DateEarned”）.val（），
平均绩点：$（“#平均绩点”）.val（）
} ,
contentType:“应用程序/json；字符集=utf-8”，
数据类型：“json”，
成功：功能（结果）{
$（“div”）.prepend（“机构名称
”+$（“#机构名称”）.val（）+”（等等…）；
}
});
});
这对我帮助很大！如果可以的话，我会投赞成票。非常感谢。