Question

我尝试使用javascript生成html页面的内容。我需要替换的标签内容是第二个标签：

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

我使用以下功能生成内容：

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

但返回的元素始终为null。为什么呢？

Answer 1

~~不确定我是否理解正确，但是您在功能结束时错过了return element;吗？在JavaScript中，您必须显式返回，与其他语言不同。~~

编辑说：

我重新阅读了您的问题，问题确实（就像Jacque在另一个答案中解释的那样），脚本标记的内容不会被视为HTML。

请参阅此JSFiddle以获取问题的较小示例：https://jsfiddle.net/Lxyamptk/

请参阅此JSFiddle以获取使用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);

请注意，要使$(templateAsText)起作用，模板必须以HTML为根元素（就像我的示例中的包装div）。例如，您将从templateAsText = "hello <div></div> hello"收到错误。

Answer 2

脚本标记内的任何内容都被视为CDATA。在W3术语中，这意味着它不会被解析为HTML，而是作为原始文本。但是，脚本标签的默认样式为display: none;，这就是您在页面上看不到其内容的原因。

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

长话短说：不要将HTML放在脚本标签中。

设置给定标记的html内容

2 个答案: