Javascript 从服务器和/或客户端加载动态元素的典型技术是什么？

假设我有一个简单的表单设置。我可以通过javascript将下面的元素作为mant times动态添加到表单中

<div class="aComplicateDiv">
    <input type="text" name="myValue">
</div>

现在假设我们保存这些值，然后想要编辑它们。我可以在编辑页面上查询数据库，然后从服务器端显示带有输入字段的div

---

我的问题是，当我添加这个div时，我使用javascript来构建元素。然而，当我在服务器端显示这些元素时，我使用的是php。似乎是重复的，特别是如果我想改变元素。但是，我可以从服务器端调用传递值的javascript函数，通过编辑页面上的javascript构建它，但这似乎不是正确的过程。如果有更好的方法或没有更好的方法，任何见解都会非常有用。

我主要在这种情况下使用的方法（特别是当重复部分变得更复杂时）：

在PHP中（极度简化）：

函数addRow（$index，$data）{
回声'
';
}
foreach（$dataFromDb作为$row）{
addRow（$row['id'，$row['value']）；
}
addRow（'模板'，''）；

在Javascript（）中

var nextIndex=2；//找到一种计算方法
$（'#添加'）。单击（函数（）{
//将模板的克隆附加到临时div
//从这个div我们可以得到html内容
var html=$（''）.append(
$（“#行模板”）.clone（）
).html（）.replace（/TEMPLATE/g，nextIndex++）；
$（“#行模板”）。之前（html）；
});

您可以使用javascript模板化方法（如AngularJS）来完成这两项工作，但您目前的工作方式没有问题。您熟悉AJAX（或一般的异步调用）吗？这方面有大量的资源。请告诉我你用什么魔法在服务器端显示这些元素。说真的，没有对错之分。在你的用例中使用任何有效的东西。

function addRow($index, $data) {
    echo '<div class="aComplicateDiv" id="row-'.$index.'">
              <input type="text" name="myValue['.$index.']" value="'.htmlspecialchars($data).'">
          </div>';
}

foreach($dataFromDb as $row) {
    addRow($row['id'], $row['value']);
}
addRow('TEMPLATE', '');

var nextIndex = 2; // Find a way to calculate this
$('#add').click(function() {
    // Append a clone of the template to a temporary div
    // From that div we can get the html-content
    var html = $('<div>').append(
        $('#row-TEMPLATE').clone()
    ).html().replace(/TEMPLATE/g, nextIndex++);
    $('#row-TEMPLATE').before(html);
});