Question

这是我的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>

我应该展示与我们合作的商店。我的老板告诉我改变他们不能工作＆＃34;硬编码＆＃34;他们希望我使用ajax！我明白我需要通过js添加元素，将来我会从数据库中显示它们，但现在他们希望我做一个简单的模板。伙计们请帮忙！

Answer 1

在vanilla JavaScript中有两种方法：

＆＃13;

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);

＆＃13;

<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>

＆＃13;

和平。

Answer 2

您所要做的就是调用ajax请求，然后将响应数据格式化为您想要的任何格式，并使用.append()函数http://api.jquery.com/append/将它们附加到您想要的div。

下面是一个示例，说明如何将html内容附加到dic。

＆＃13;

$(document).ready(function(){
  var htmlToBeAppended = "<div class='col'> <b> Appended Test Column </b></div>";
  for(var i=0; i<10; i++){
    $('.append-here').append(htmlToBeAppended);
   }
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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 class="append-here"></div>
    </div>

＆＃13;

Answer 3

你可以将这个insdie写成一些函数，并在每次需要添加新列时调用它

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

如果您需要添加文本而不是测试，则可以将功能更改为

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

Answer 4

我建议你做以下事情：

添加隐藏的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);
}

#template {
  display: none;
}

.col {
  display: inline-block;
  border: 1px solid gray;
  padding: 4px 8px;
}

<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>
<button id="addrow">Add</button>
<div id="template">
  <div class="col">new</div>
</div>

⋅ ⋅ ⋅

我们还可以想象您已经从ajax请求中获取了数据，并且您想要呈现该页面：

// Let's say shops and template are results from an ajax request
shops = ['Shop A', 'Shop B', 'Shop C', 'Shop D'];
template = ['<div class="col">', '</div>'];

var el = document.querySelector(".row.text-center");
shops.forEach(function(shop){
  el.insertAdjacentHTML('beforeend', template.join(shop));
})

.col {
  display: inline-block;
  border: 1px solid gray;
  padding: 4px 8px;
}

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

希望它有所帮助。

如何动态添加列到HTML？

4 个答案: