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.

why would you create the element with JS? Just skip steps 1 +2 (and 4 for that matter) and add `document.getElementById("whatever").innerHTML = "Hi, " + UserName;` inside of `` tags. — jmore009, Dec 29 '14 at 16:18
That's exactly what I did.. The elements weren't created with JS — user3088260, Dec 29 '14 at 16:20
document.getElementById("whatever").innerHTML = "Hi, " + UserName; isnt that what you are already doing with the line above? If you are saying that you need to retrieve the data from the ASP.NET page then you can simply make an Ajax call and retrieve that data and inject it into the element. — Hozikimaru, Dec 29 '14 at 16:20
Your server-side example is actually using a particular type of "template", although ASP.NET doesn't call it that. You can also use templates on the client side, making your example no more complicated than `
Hi, {{theUsersName}}
`. — , Dec 29 '14 at 16:23

score 4 · Accepted Answer · answered Dec 29 '14 at 16:31

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>

jjk_charles · Answer 2 · 2014-12-29T16:33:14.993

3

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

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

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

edited Dec 29 '14 at 16:33

answered Dec 29 '14 at 16:23

jjk_charles

1,250
11
23

2

Backbone and Ember are not templating libraries! – Ram Dec 29 '14 at 16:26
Exactly what I was going to say. He's probably referring to backbone's dependency, underscore.js. – bowheart Dec 29 '14 at 16:27
@Vohuman bowheart thanks for pointing it out. Yes it should have been underscore.js! Updating the answer now. – jjk_charles Dec 29 '14 at 16:29

score 0 · Answer 3 · answered Dec 29 '14 at 16:25

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

score 0 · Answer 4 · edited May 23 '17 at 11:51

0

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?

edited May 23 '17 at 11:51

Community

1
1

answered Dec 29 '14 at 16:29

Rupert

1,629
11
23

score 0 · Answer 5 · answered Dec 29 '14 at 16:33

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

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.

Injecting data in html with javascript

Hi, {{theUsersName}}

5 Answers5