3

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.

4
  • 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 <script></script> tags.
    – jmore009
    Dec 29, 2014 at 16:18
  • That's exactly what I did.. The elements weren't created with JS Dec 29, 2014 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, 2014 at 16:20
  • 1
    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 <h1>Hi, {{theUsersName}}</h1>.
    – user663031
    Dec 29, 2014 at 16:23

5 Answers 5

4

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

3
  • 2
    Backbone and Ember are not templating libraries!
    – Ram
    Dec 29, 2014 at 16:26
  • Exactly what I was going to say. He's probably referring to backbone's dependency, underscore.js.
    – bowheart
    Dec 29, 2014 at 16:27
  • @Vohuman bowheart thanks for pointing it out. Yes it should have been underscore.js! Updating the answer now. Dec 29, 2014 at 16:29
0
<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.

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?

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.