时间戳

首页 > 解决方案 > 如何动态地将列添加到html？

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！屁股我明白我需要通过js添加元素，将来我会从数据库中展示它们，但现在他们希望我制作一个简单的模板。请各位大侠帮忙！

标签： javascriptjqueryhtmlajax

解决方案

原生 JavaScript 中的 2 种方式：

var container = document.querySelector("#container");
console.log(container);

// First method
container.innerHTML = container.innerHTML + "<div class='col'>test+</div>";


// Second method
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);
<div id="container" 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>

和平。

推荐阅读