How to create template or placeholder in html and add them dynamically to the body?

Question

I want to create a forum in html. As you have guessed I am new to web dev.

Let's say there is a template for messages posted by the users:

<div id="message">
    <h3>#name of the user</h3>
    <p>#message</p>
</div>

I wish to populate this template with the user's name and the message and then dynamically add it to the main body when the user posts it.

However as I told you I am very new to web development. I am not sure how to do this. All I need is your guideline and ideas. Maybe point me toward appropriate tutorial and references.

The best to do something dynamically on your html, is to use javascript. You can see a very simple example of integration here : https://www.w3schools.com/js/js_whereto.asp — Benoit Chassignol, Apr 05 '19 at 14:59
If you wish to create an actual forum this cannot be done with html alone. You'll need a database to store users posts, and an API to talk to the database. But as far as your question goes, you can use javascript to append markup to an element. — Isaac Vidrine, Apr 05 '19 at 15:01

Maheer Ali · Answer 1 · 2019-04-05T15:09:46.343

1

You can use Template Literals and just interpolate name and msg inside template.

let template  = document.querySelector('div#message');

function createMessage(name,msg){
  return (
    `<div id="message">
    <h3>${name}</h3>
    <p>${msg}</p>
    </div>`
  
  )
}


let data = [{
  name:"name 1",
  message:"message 1",
},

{
  name:"name 2",
  message:"message 3",
},
{
  name:"name 3",
  message:"message 3",
},

]


let str = data.map(x => createMessage(x.name,x.message)).join('');

document.body.insertAdjacentHTML("afterend",str)

edited Apr 05 '19 at 15:09

answered Apr 05 '19 at 15:00

Maheer Ali

32,967
5
31
51

1

`document.write` is [a **really** bad practice](https://stackoverflow.com/q/802854/6320039).... Why not `document.body.append`? – Ulysse BN Apr 05 '19 at 15:03

stan chacon · Answer 2 · 2019-05-06T21:16:44.813

You can use format unicorn to do this like stackExchange does, example:

Your Html:

    <div id="messageLoader">

    </div>

  <script type="text/template" id="templateMessage">
    <h2>{title}</h2>
    <p>{message}</p>
    <br>
    <span><Strong>{sign}</strong><span>
  </script>

Your script:

String.prototype.formatUnicorn =  function () {
      "use strict";
      var str = this.toString();
      if (arguments.length) {
          var t = typeof arguments[0];
          var key;
          var args = ("string" === t || "number" === t) ?
              Array.prototype.slice.call(arguments)
              : arguments[0];

          for (key in args) {
              str = str.replace(new RegExp("\\{" + key + "\\}", "gi"), args[key]);
          }
      }

      return str;
  };
  var jsonMessage = {title:"Custom Template With Form Unicorn",message:"Stack Overflow Rocks bae !!",sign:"Stan Chacon"};
  let myFirstUnicornTemplate = document.getElementById("templateMessage").text;
  var template = myFirstUnicornTemplate.formatUnicorn(jsonMessage);
  document.getElementById("messageLoader").innerHTML = template;

EDIT: fun fact you can use it here in stack overflow just copy and paste this on console :

"Hello {name}, welcome to StackOverflow {emoji}".formatUnicorn({name:"User",emoji:"=)"});

Or try the snippet:

  String.prototype.formatUnicorn =  function () {
      "use strict";
      var str = this.toString();
      if (arguments.length) {
          var t = typeof arguments[0];
          var key;
          var args = ("string" === t || "number" === t) ?
              Array.prototype.slice.call(arguments)
              : arguments[0];

          for (key in args) {
              str = str.replace(new RegExp("\\{" + key + "\\}", "gi"), args[key]);
          }
      }

      return str;
  };

var x = "Hello {name}, welcome to StackOverflow {emoji}".formatUnicorn({name:"User",emoji:"=)"});
console.log(x);

Hope it helps =)

score 0 · Answer 3 · answered Apr 05 '19 at 14:59

0

If you're using javascript you can manipulate the content of an html tag like this:

document.getElementById("yourhtmltagid").innerHTML = "#message";

you can learn the basics on your own:

https://www.w3schools.com/jsref/prop_html_innerhtml.asp

answered Apr 05 '19 at 14:59

Bobbey

123
3
9

How to create template or placeholder in html and add them dynamically to the body?

3 Answers3