使用 JavaScript 写入 <div> 元素的替代方法？答案

【问题标题】：Alternative way to use JavaScript to write to a <div> element?使用 JavaScript 写入 <div> 元素的替代方法？
【发布时间】：2023-03-08 22:56:01
【问题描述】：

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

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

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

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

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

【问题讨论】：

在加载之前不能写入 DOM 元素，因此您需要某种与 onload 等效的回调。如果你想避免它，你应该能够确保 script 标签出现在 DOM 元素之后，我建议在 body 结束之前。您正在写入函数中的div...您不能在其声明中调用函数，但您可以在function() {..}(); 之后立即执行此操作。因此，请尝试将printMsg 向下移动并在右大括号后添加();。
谢谢马特。看来我不能把
来调用函数 printMsg()。那么除了其他人指出的方法之外，有没有办法通过向
元素添加回调来调用 printMsg() 函数？

标签： javascript html

【解决方案1】：

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

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

【讨论】：

问题没有提到 jQuery，所以这不是一个有效的答案。

【解决方案2】：

正如 Whipple 建议的那样，您可以按照以下方式进行操作：

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

DEMO

【讨论】：

我想你想删除onload。
@BehnamEsmaili：非常感谢。那么这里有什么魔力呢？为什么我们可以使用 (function printMsg() {} )() 来摆脱 onload 事件？
@tonga 这里没有魔法。我只是声明了一个自调用函数。这种类型的javascript函数称为closure。查看此链接以获取有关closure的更多信息：stackoverflow.com/questions/6090912/…
谢谢贝南。我以前在 JS 中听说过这个术语。会更深入地研究它:)
@tonga 它是一个immediately invoked function express，它创建了一个闭包。（所有正方形都是矩形；并非所有矩形都是正方形等）

【解决方案3】：

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

另外，正如马特·惠普尔指出的那样：

确保脚本标签位于 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/

【讨论】：

【解决方案4】：

还有.ready函数，但需要使用jQuery。如果您已经在考虑将 jquery 用于其他事情，那么这就是要走的路。它在 DOM 准备就绪后运行。

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

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

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

【讨论】：

【解决方案5】：

你可以使用：

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;

【讨论】：

【解决方案6】：

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();

【讨论】：

【解决方案7】：

您可以使用 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);

【讨论】：