Injecting data in html with javascript

Question

Using server side scripting it's as easy as pie to inject data in HTML like this (ASP.NET):

//Assuming theTime is a variable
<h1>the time is, @theTime</h1>

---

But in JavaScript one basically needs to:

Create an element:

<h1></h1>

Give it an ID:

<h1 id="whatever"></h1>

Create a script tag:

<script></script>

Locate the element by it's ID:

document.getElementById("whatever")

Then use innerHTML to modify it's content:

document.getElementById("whatever").innerHTML = "Hi, " + TheTIme;

Final code:

<h1 id="whatever"></h1>
<script>
    document.getElementById("whatever").innerHTML = "Hi, " + TheTime;
</script>

---

Is it possible to inject values/data in JavaScript as one would do in ASP.NET / PHP?

EDIT: The variable is a JS variable and getting it from the server is under control.

Answer 1

Well you could use some template library like handlebars and use jquery to facilitate the element selection, example:

<div id="target"></div>

<script id="hi-template" type="text/x-handlebars-template">
  Hi {{userName}}
</script>

<script type='text/javascript'>
    var template = Handlebars.compile($("#hi-template").html());
    $('#target').html(template({userName: "bob"}));
</script>

Answer 2

Javascript Templating solves exactly this problem of binding data to HTML elements.

Below are few of the common templating engines used these days:

• Underscore.js
• Handlebars.js
• Mustache.js

If you are looking for something simple, try Micro Templating engine from John Resig

Answer 3

<h1>Hi, @theUsersName</h1>

I've never worked with ASP.NET, but I'm assuming @theUserName is a variable. If that's the case, then a 1 to 1 replacement for that is not possible. However, it's still possible.

I'm not sure how you're getting the username, but I would assume you have some way to get it into a JavaScript variable. In that case, I would suggest something like this:

 function changeName(username) { document.getElementById("username").innerHTML = username; } 

 <h1>Hi, <span id="username">StackOverflow</span>!</h1> <button onclick="changeName('user3088260')">Click to Change the Name</button> 

Now, getting the data is a different story, I would assume an AJAX call, in which case you could do something like this

if(xmlhttp.responseText !== ""){
    changeName("user3088260");
}

All that other stuff you mentioned in unnecessary.

I will also say the entire idea seems like a poor design choice. If you have a username, I would assume you have a login system. If you have a login system, then you have to validate the user before outputting the page. If you have to validate the user before outputting the page, then you have their username. If you have their username, then put it in the pre-rendered page. No need to use JS after you've outputted the page.

Hopefully that is what you're looking for. If not, I'm sure somebody else will be along shortly with something that does.

Answer 4

One of the easiest javascript template engines to get started with is Underscore. Here is a protected answer from SO explaining how to do it:

How to use underscore.js as a template engine?

Answer 5

As someone says, there are a lot of Javascript templating frameworks. Here you have a few of them:

• Handlebars.js
• mustache.js
• Hogan.js
• doT.js
• nunjucks
• jade

After picking one, you can (for example) do something like this:

<h1>Hi, {{userName}}</h1>

You can see an example of client-side templating working with Angular on this link .