How to dynamically add div in JavaScript?

Using jQuery:

$(document).append('<div class="col l3 m6 w3-margin-bottom"> <div class="display-container"> <div class="w3-display-topleft w3-black w3-padding">Brick House</div> <img src="image.jpg" alt="House" style="width:99%"> </div> </div>');

Get a reference to the DOM element in your code (whether it be by id, class name, tag name, etc.), then append this is as a string to the innerHTML attribute:

let el = document.getElementById('id');
el.innerHTML += '
<div class="col l3 m6 w3-margin-bottom">
  <div class="display-container">
    <div class="w3-display-topleft w3-black w3-padding">Brick House</div>
    <img src="image.jpg" alt="House" style="width:99%">
  </div>
</div>
';

This is a simple method using the new template strings.

You can even put a variable value inside by doing ${myVar} inside of the template string.

// This is code that you can change
let code = `
<div class="col l3 m6 w3-margin-bottom">
  <div class="display-container">
    <div class="w3-display-topleft w3-black w3-padding">Brick House</div>
    <img src="image.jpg" alt="House" style="width:99%">
  </div>
</div>`;

// You can append it to an element in HTML
document.getElementById('id').innerHTML+=code;