使用 JavaScript 插入 HTML答案

【问题标题】：Inserting HTML using JavaScript使用 JavaScript 插入 HTML
【发布时间】：2012-06-17 01:31:32
【问题描述】：

好的，我阅读了this 线程来了解如何使用 JavaScript 生成 HTML。我尝试使用以下脚本进行操作：

<script type='text/javascript'>
function generate_page() {
    var x = 0;
    var y = 0;
    var lines = 20;
    var output;
    while (x < lines) {
        while( y < lines*2){
            output = ("<div id='x" + x + "_" + y + "'>x</span>");
            $('board').prepend(output);
            y++;
        }
        y = 0;
        x++;
        $('board').append('<br />');
    }
}
</script>

</head>
<input type='button' value='test' onClick='generate_page()'>
<body>
<div id='board'>

</div>

</body>
</html>

它不会返回任何错误，只是什么都不做。我做错了什么？

【问题讨论】：

a) 你使用的是 jQuery 语法，所以你是否包含 jQuery 和 b) 为什么你的输入在 body 标签之外？
$('board') ==> $('#board')
这篇文章的标题应该是“Writing HTML with JavaScript”...
@ikaradashkov 为什么要这样称呼它？
@GerardSexton 因为标题曾经是“在 HTML 中插入 JavaScript”。现在，我看到它已被修改为“使用 JavaScript 插入 HTML”，这使得 total 有意义（并且与我提出的建议一致）。

标签： javascript jquery html

【解决方案1】：

您在 JavaScript 中打开一个 DIV 标记并关闭一个 SPAN 标记。

【讨论】：

问题是他忘记了一个哈希#。
谢谢德里克，就是这样。 :)

【解决方案2】：

您缺少 ID 的 # 符号，试试这个：

<script type='text/javascript'>
function generate_page() {
    var x = 0;
    var y = 0;
    var lines = 20;
    var output;
    while (x < lines) {
        while( y < lines*2){
            output = ("<span id='x" + x + "_" + y + "'>x</span>");
            $('#board').prepend(output);
            y++;
        }
        y = 0;
        x++;
        $('#board').append('<br />');
    }
}
</script>

</head>

<body>
<input type='button' value='test' onClick='generate_page()'>
<div id='board'>

</div>

</body>
</html>

还将按钮移动到正文。

【讨论】：

<input /> 在 HTML5 中不是必需的，在 HTML4 中无效。

【解决方案3】：

您正在打开一个 div 并用一个 span 关闭它，而且，您永远不会关闭 div，也永远不会真正打开 span。顺便说一句，利用 document.createElement("div") 是一种干净的方法。

【讨论】：

我认为这不是问题，因为浏览器会自动更正它。
浏览器会为你关闭它并忽略</span>。但它并不是一直都很好用。
哦，是的：document.createElement("div") ==> $("<div>")
哈哈，我是老派...我不知道我开始输入多少次 new XmlHttpRequest(); :P

【解决方案4】：

你正在使用 jQuery 语法，所以你应该包括 jQuery

像这样：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type='text/javascript'>
    function generate_page() {
        var x = 0;
        var y = 0;
        var lines = 20;
        var output;
        while (x < lines) {
            while (y < lines * 2) {
                output = ("<div id='x" + x + "_" + y + "'>x</span>");
                $('#board').prepend(output);
                y++;
            }
            y = 0;
            x++;
            $('#board').append('<br />');
        }
    } 
</script></head><body>
<input type='button' value='test' onclick='generate_page()'>
<div id='board'>
</div></body></html>

【讨论】：

他确实用 jquery 对其进行了标记，但他没有将标记发布到他可以在上面。