How to dynamically add columns to html?

Question

This is my 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>

I should show shops which work with us. My boss told me to change that they don't work "hard-code", they want me to use ajax! ass I understand somehow I need to add elements by js, in future I will show them from a database but now they want me to make something like a simple template. Guys help, please!

Might also check https://stackoverflow.com/questions/867916/creating-a-div-element-in-jquery — Nico Van Belle, Jun 05 '18 at 12:03

JeanSaigne · Answer 1 · 2018-06-05T13:57:44.183

0

2 ways in vanilla JavaScript:

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>

Peace.

edited Jun 05 '18 at 13:57

answered Jun 05 '18 at 12:06

JeanSaigne

323
1
10

Make a working snippet, that's not working. Both of them. – Takit Isy Jun 05 '18 at 12:26
Example updated with working snippet ^^ – JeanSaigne Jun 05 '18 at 14:38

score 0 · Answer 2 · answered Jun 05 '18 at 12:06

All you have to do is call the ajax request then format the response data to any format you want and append them to the div where you want them using .append() function http://api.jquery.com/append/.

Below is an example showing how you can append the html content to a dic.

$(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);
   }
})

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

score 0 · Answer 3 · answered Jun 05 '18 at 12:20

You could write this insdie some function and call it each time when you need to add a new column

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

If you need to add text instead of test you could change the function as

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

Takit Isy · Accepted Answer · 2018-06-05T12:38:59.567

I suggest you to do the following:

Add a hidden div id="template" to store the HTML you want to use as a new column
Use some JavaScript (and only JavaScript!) to copy its content just before the end of the element

Here is a working snippet where I used a button to trigger the addition of column:

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>

⋅ ⋅ ⋅

We can also imagine you already got data from an ajax request, and you want to render the page:

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

Hope it helps.

How to dynamically add columns to html?

4 Answers4