Setting the html content of a given tag

Question

I'm trying to generate the content of an html page using javascript. The contents of the tag I need to replace are the ones in the second :

<script id="accountview" type="text/view">
    <!-- We show the menu bar regardless of the window we are viewing as long as we are logged in -->
    <div class="panel">
      <button onclick="go_home()">Home</button>
      <button onclick="go_browse()">Browse</button>
      <button onclick="go_account()">Account</button>
    </div>
    <div id="welcome" class="welcome">
    <!-- Content to be replaced -->
    </div>
</script>

I'm using the following function to generate the content:

function go_account()
{
    // Get the currently logged in user's data(name, surname, e-mail, country, city)
    var userData = serverstub.getUserDataByToken(localStorage.getItem("current_user")).data;
    // To get the actual user attributes use ".": userData.firstname
    var userInfo = "<div class=\"welcome\"> User Information: <br>";
    userInfo += "email:" + userData.email + "<br>";
    userInfo += "firstname:" + userData.firstname + "<br>";
    userInfo += "lastname:" + userData.lastname + "<br>";
    userInfo += "gender:" + userData.gender + "<br>";
    userInfo += "city:" + userData.city + "<br>";
    userInfo += "country:" + userData.country + "<br>";
    userInfo += "</div>";
    // Change the <div> with the user info
    var element = document.getElementById("welcome");
    element.innerHTML = userInfo;
}

but the returned element is always null. Why?

Answer 1

Not sure if I understand you correctly, but is it simply that you're missing a return element; at the end of your function? In JavaScript, you must return explicitly, unlike some other languages.

Edited to say:

I re-read your question and the issue is indeed (like Jacque explained in another answer) that the contents of your script tag aren't seen as HTML.

See this JSFiddle for a smaller example of the problem: https://jsfiddle.net/Lxyamptk/

And see this JSFiddle for a possible solution using jQuery: https://jsfiddle.net/Lkd180zk/

HTML:

<script id="accountview" type="text/view">
  <div>
    <div id="welcome" class="welcome"></div>
  </div>
</script>

<div id="output">
    output goes here
</div>

JS with jQuery:

var templateAsText = $("#accountview").html();
var templateAsHTML = $(templateAsText);
templateAsHTML.find("#welcome").text("Welcome!");
$("#output").html(templateAsHTML);

Note that for $(templateAsText) to work, the template must have a HTML element as its root (like the wrapper div in my example). You'll get an error from templateAsText = "hello <div></div> hello", for example.

Answer 2

Any content written inside a script tag is considered as CDATA. In W3 lingo, this means it is not parsed as HTML, but as raw text. Script tags however have a default style of display: none; which is why you don't see their content on the page.

https://stackoverflow.com/a/5679857/2813263

Long story short: don't put HTML in script tags.