在现有成绩录入系统的基础上，使用js增加一个新同学的成绩信息的输出

要在现有的成绩录入系统上使用JavaScript增加一个新同学的成绩信息输出，你可以按照以下步骤进行：

1. 首先，确保你的成绩录入系统有一个可以展示成绩信息的界面，比如一个表格或者列表。

2. 然后，你需要一个表单来输入新同学的基本信息和成绩，包括输入框和提交按钮。

3. 接下来，使用JavaScript来监听提交按钮的点击事件，在用户输入新同学信息并提交后，获取这些信息。

4. 创建一个函数，用于将新同学的信息和成绩添加到展示成绩的界面中。

5. 你可以使用DOM操作来插入新的信息，例如使用`document.createElement`创建新元素，然后使用`appendChild`或`insertBefore`方法将其插入到页面的指定位置。

6. 最后，更新页面显示，让新添加的成绩信息能够即时显示出来。

下面是一个简单的示例代码，展示了如何实现这个过程：

<!-- 假设这是你的成绩展示界面 -->
<table id="scores-table">
    <thead>
        <tr>
            <th>姓名</th>
            <th>成绩</th>
        </tr>
    </thead>
    <tbody>
        <!-- 这里会动态添加学生的成绩信息 -->
    </tbody>
</table>

<!-- 这是添加新同学成绩信息的表单 -->
<form id="add-student-form">
    <input type="text" id="student-name" placeholder="请输入学生姓名">
    <input type="number" id="student-score" placeholder="请输入学生成绩">
    <button type="button" onclick="addStudentScore()">提交</button>
</form>

<script>
function addStudentScore() {
    // 获取表单中的信息
    var name = document.getElementById('student-name').value;
    var score = document.getElementById('student-score').value;
    
    // 创建新的表格行
    var newRow = document.createElement('tr');
    
    // 创建并设置姓名和成绩的单元格
    var nameCell = document.createElement('td');
    nameCell.textContent = name;
    
    var scoreCell = document.createElement('td');
    scoreCell.textContent = score;
    
    // 将单元格添加到新行中
    newRow.appendChild(nameCell);
    newRow.appendChild(scoreCell);
    
    // 将新行添加到成绩表格的body中
    document.getElementById('scores-table').getElementsByTagName('tbody')[0].appendChild(newRow);
    
    // 清空表单输入
    document.getElementById('student-name').value = '';
    document.getElementById('student-score').value = '';
}
</script>