Javascript 如何向html动态添加列？

这是我的HTML

    <div class="row text-center">
        <div class="col h4">We Work With:</div>
        <div class="col">test</div>
        <div class="col">test</div>
        <div class="col">test</div>
        <div class="col">test</div>
    </div>

我们与：
测试
测试
测试
测试

我应该带你去看看和我们合作的商店。 我的老板让我改变他们不使用“硬代码”，他们希望我使用ajax！ ass我知道我需要通过js添加元素，将来我将从数据库中显示这些元素，但现在他们希望我制作一个简单的模板。

---

伙计们，帮帮我

香草JavaScript中的两种方式：

var container=document.querySelector（“容器”）；
控制台日志（容器）；
//第一种方法
container.innerHTML=container.innerHTML+“test+”；
//第二种方法
var newRow=document.createElement（“div”）；
console.log（“newRow”，newRow）；
var rowText=document.createTextNode（“test++”）；
console.log（rowText）；
newRow.appendChild（rowText）；
newRow.classList.add（“col”）；
console.log（newRow）；
container.appendChild（newRow）

我们与：
测试
测试
测试
测试
您所要做的就是调用ajax请求，然后将响应数据格式化为您想要的任何格式，并使用
.append（）
函数将它们附加到您想要的div中

下面的示例显示了如何将html内容附加到dic


$（文档）.ready（函数（）{
var htmlToBeAppended=“追加测试列”；
对于（var i=0；i您可以编写这个函数，并在每次需要添加新列时调用它

function add_data(){
  var html ='<div class="col">test</div>'; // Html to be appended
  $('.row').append(html);
}

函数添加_数据（）{
var html='test'；//要追加的html
$（'.row'）.append（html）；
}

如果需要添加文本而不是测试，则可以根据需要更改函数

function add_data(text){
  var html ='<div class="col">'+text+'</div>'; // Html to be appended
  $('.row').append(html);
}

函数添加数据（文本）{
var html=''+text+''；//要追加的html
$（'.row'）.append（html）；
}
我建议您执行以下操作：


添加一个隐藏的
div id=“template”
来存储要用作新列的HTML
使用一些JavaScript（并且只有JavaScript！）在元素末尾之前复制其内容

下面是一个工作片段，我使用一个按钮触发添加列：


var col=document.querySelector（'#template'）.innerHTML
var el=document.querySelector（“.row.text center”）；
document.querySelector（'#addrow'）.onclick=function（）{
el.insertAdjacentHTML（'beforeend'，col）；
}
#模板{
显示：无；
}
上校{
显示：内联块；
边框：1px纯色灰色；
填充：4px8px；
}

我们与：
测试
测试
测试
测试
添加
新的
Try:$（'.text center'）。append（'testaddednew'）可能还会检查是否要从MySQL或从何处馈送数据。制作一个工作代码段，这两个代码段都不工作。使用工作代码段更新示例^^