根据函数中的数据创建动态div内容

Question

我有一个数组对象，在我的js方面有一些数据集。在我的html中，我需要在按钮点击时动态创建一个包含此数据集的div。

以下是我的实际HTML

 <div class="grid-container">
    <h4 class="secondary bot-space-md">Certificate</h4>
        <a href="#" class="primary closeIcon icon-Delete"></a>
            <div class="row">
             <div class="col-6">
                 <label>Country</label>
                    <p>test</p>
                </div>
                <div class="col-6">
                 <label>Certificate Name</label>
                    <p>test</p>
                </div>
            </div>
            <div class="row">
             <div class="col-6">
                 <label>Certification Board</label>
                 <p>test</p>
                </div>
                <div class="col-6">
                 <label>Issue Date</label>
                 <p>test</p>
                </div>
            </div>
            <a href="#" class="text-primary label-2 secondary viewCertificate">View Certifacte</a>    
        </div>

在上面的html中，div class =“row”重复使用不同的标签名称和值。

现在当我的函数被调用时，我试图通过迭代循环来自动形成这个html

function saveDegreeData() {
   var [{name: "Country", value: "test"},{name: "Certification Name", value: "test"},
{name: "Certification Board", value: "test"},{name: "Issue Date", value: "test"}];
//Using this above data how can we create above html with in js so that I can append to my existing html
}

有人可以提供帮助