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?
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.
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.