JavaScript 在 HTML 中创建新行，onclick 将值粘贴到另一个下面

Question

所以我浏览了很多网站，但似乎找不到通过 JavaScript 在 HTML 中创建新行的最基本方法。这将由一个 onclick 按钮激活，该按钮将从一个表中复制结果并将它们发布到一个单独的 div 中。理想情况下，“添加行”按钮不会与创建的每个新行一起复制。相反，我有一个按钮，每次按下时，都会从表格中获取值并显示包含所有值的文本(而不是在另一个表格中)。一旦复制了新值，就不会替换这些值的串联；新值将粘贴在下面。

这是我一直在尝试的:

HTML:

<table>
    <tr id="row4">
        <td>
            Result:
        </td>
        <td>
            <input type="text" placeholder="00" name="row4" class="row" id="row3_1"/>
        </td> 
        <td>
            <input type="text" placeholder="00" name="row4" class="row" id="row3_2"/>
        </td> 
        <td>
            <input type="text" placeholder="00" name="row4" class="row" id="row3_3"/>
        </td> 
        <td>
            <input type="text" placeholder="00" name="row4" class="row" id="row3_4"/>
        </td>
    </tr>
</table>

<input type="button" id="postToClipboard" onclick="postToClipboard()" value="Post results!">
<div id="clipboard"></div>

JavaScript:

function postToClipboard() {
    document.getElementById("clipboard").innerHTML = '<p>' + "Final Time =  " + (arrayRow3[0]  || 00) + ":" + (arrayRow3[1] || 00) + ":" + (arrayRow3[2] || 00) + ":" + (arrayRow3[3] || 00) + '</p>';
}

我最近了解了 join()，但我会在我的下一个项目中实现它。

任何帮助将不胜感激!提前致谢:)

Answer 1

在你的 JavaScript 中，使用 += 来附加，而不是 = 来覆盖:

function postToClipboard() {
    document.getElementById("clipboard").innerHTML += '<p>' + "Final Time =  " + (arrayRow3[0]  || 00) + ":" + (arrayRow3[1] || 00) + ":" + (arrayRow3[2] || 00) + ":" + (arrayRow3[3] || 00) + '</p>';
}