3

<div>我想在页面加载时在页面元素中打印一条消息。我有以下 HTML 和 JavaScript 代码：

<body onload="printMsg()">
    <div id="write"></div>
</body>

function printMsg() {
    var node = document.getElementById("write");
    node.innerHTML = "<p>" + "Hello World!" + "</p>";
}

在这里，我使用元素中的onload事件<body>来调用printMsg()页面加载。

但是如果我不使用事件，是否有任何替代方法可以直接在 JavaScript 函数onload中写入？<div id="write"></div>printMsg()

4

7 回答 7

7

正如惠普尔建议的那样，您可以按以下方式进行：

   <body>
    <div id="write"></div>
    <script>
    (function printMsg() {
        var node = document.getElementById("write");
        node.innerHTML = "<p>" + "Hello World!" + "</p>";
    })();
    </script>
    </body>

演示

于 2013-02-27T18:56:03.683 回答
2

您可以将这些函数放在声明中： $(document).ready(function() { });

您可以在“脚本”内的标题中调用这些，或将其放入另一个文件并回调。此声明中的所有函数都将随着页面的加载而运行。效果和你onload是一样的，但是不要弄乱你的body标签。

于 2013-02-27T18:53:56.860 回答
2

您可以编写一个简单的 javascript 函数来创建一个元素，而不是手动编写每个标签，如果您经常这样做会让人感到困惑。

此外，正如 Matt Whipple 指出的那样：

确保脚本标签在 DOM 元素之后

HTML：

<body>
    <div id="write"></div>
    <script>printMsg()</script>
</body>

Javascript：

function printMsg() {
    newElement = document.createElement('p');
    newElement.innerHTML = "Hello world!";
    document.getElementById("write").appendChild(newElement);
}

http://jsfiddle.net/Qrsmq/7/

于 2013-02-27T18:59:03.193 回答
2

您可以使用：

window.onload  =   function() {
    var node = document.getElementById("write");
    node.innerHTML = "<p>" + "Hello World!" + "</p>";
}

或者

function printMsg() {
    newElement = document.createElement('p');
    newElement.innerHTML = "Hello world!";
    document.getElementById("write").appendChild(newElement);
}
document.body.onload = printMsg;

或者

function printMsg() {
    newElement = document.createElement('p');
    newElement.innerHTML = "Hello world!";
    document.getElementById("write").appendChild(newElement);
}
window.onload  = printMsg;
于 2013-02-27T19:16:00.817 回答
1

也有.ready功能，但需要使用jQuery。如果您已经在考虑将 jquery 用于其他事情，那么这就是要走的路。一旦 DOM 准备好，它就会运行。

但最直接的选择是在以下末尾调用内联函数body：

<body>
    <div id="write"></div>
    <script>
        (function(){ 
             //do something with #write
        });
    </script>
</body>

与该ready函数一样，它也只等待加载 DOM，它比onload侦听器更快，并且它应该与浏览器广告 javascript 向后兼容 =)

于 2013-02-27T19:05:57.590 回答
0 
var myWeb = new Object(), _m = "model", _v = "view", _c = "controller";

myWeb.model = {

    myEle   : "log",
    myText  : "Hello World!"

}
myWeb.view = {

    doText : function() {
        document.getElementById(myWeb[_m].myEle).innerHTML = myWeb[_m].myText;
    }

}
myWeb.controller = {

    init: function() {
        if (document.readyState == "complete") {
            this.run();
        } else {
            setTimeout(myWeb[_c].init, 11);
        }
    },
    run: function() {
        myWeb[_v].doText();
    }

}
myWeb[_c].init();
于 2014-06-20T18:27:12.303 回答
0

您可以使用 javascript 插件 mustache JS，使用 JSON 表示法和 javascript 呈现模板。JavaScript 中使用 {{mustaches}} 的最小模板。允许您以最少的代码使用简单或复杂的模板。

https://github.com/janl/mustache.js

代码示例：

// Json Data and Javascript function to calculate the value of return
var view = {
  title: "Joe",
  calc: function () {
    return 2 + 4;
  }
};

// The HTML Rendered with a simple example of template
var output = Mustache.render("{{title}} spends {{calc}}", view);

// Use your New HTML with native Javascript
document.getElementById("divWrite").innerHTML(output);

// Or you use your New HTML with JQuery
$("#divWrite").html(output);
于 2017-02-21T15:24:45.580 回答