使用JavaScript和jQuery生成HTML-JavaScript无法执行？

Question

Following to this post, I recreated the code with jQuery. 在这篇文章之后，我使用jQuery重新创建了代码。 jsFiddle says, that everything should be find and I can't find any mistakes either. jsFiddle说，应该找到所有内容，我也找不到任何错误。 Here's the Code: 这是代码：

function generatePost(title, time, text) {
var postCount = 0;

$('#postcontainer').append('<div></div>').attr('post_' + postCount).attr('class', 'content');
$('#post_' + postCount).append('<h3>' + title + '</h3>').attr('id', 'post_h3_' + postCount);
$('#post_h3_' + postCount).append('<span>' + time + '</span>');

var paragraphs = text.split("||");

for (var i = 0; i < paragraphs.length; i++) {
    var paragraphCount = 0;
    $('#post_' + postCount).append('<p>' + paragraphs[i] + '</p>').attr('id', 'post_p_' + postCount + '_' + paragraphCount);
    paragraphCount++;
}

postCount++;
}

Now the problem might be that the JavaScript is not even executed, my HTML looks like this: 现在的问题可能是JavaScript甚至没有执行，我的HTML看起来像这样：

<head>
    <?php include 'components/_head.php';?>
    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="js/jquery-migrate-1.2.1.min.js"></script>
    <script src="js/postGen.js"></script>
    <script type="application/javascript" src="postGen.js">
        document.addEventListener('DOMContentLoaded', function() {
            generatePost("Testing Title", "I don't know", "This is || a paragraph");
        }
    </script>
</head>
<body>
    <header>
        <?php include 'components/header.php';?>
    </header>

    <main>
        <?php include 'components/main.php';?>
        <div class="fullscreencontainer">
            <img class="background" src="img/background.jpg">
            <div class="title">
                <h2>Der Bürger als Edelmann</h2>
                <h4>von Moliére</h4>
            </div>
        </div>
        <div class="container">
            <div id="postcontainer">
                /* ? */
            </div>
            <div class="sidebar">

            </div>
        </div>
    </main>
    <footer>
        <?php include 'components/footer.php';?>
    </footer>
</body>

The structure of the files: 文件的结构：

index.php index.php
js/jquery-1.11.3.min.js js / jquery-1.11.3.min.js
js/jquery-migrate-1.2.1.min.js js / jquery-migrate-1.2.1.min.js
js/postGen.js This file contains the code written in the first code-box js / postGen.js 此文件包含在第一个代码框中编写的代码

Inspector shows nothing new. 检查器显示没有新内容。
Console shows: 控制台显示：

Syntax Error: Missing ) after argument list 语法错误：参数列表后缺少）

EDIT: The final Code: 编辑：最终代码：

  <script type="application/javascript"> $(document).ready(function() { function generatePost(title, time, text) { var postCount = 0; $('#postcontainer').append('<div id=' + "post_" + postCount + '></div>') $('#post_' + postCount).attr('class', 'content'); $('#post_' + postCount).append('<h3>' + title + '<span>' + time + '</span></h3>'); var paragraphs = text.split("||"); for (var i = 0; i < paragraphs.length; i++) { $('#post_' + postCount).append('<p>' + paragraphs[i] + '</p>'); } postCount++; } generatePost("Testing Title", "I don't know", "This is || a paragraph"); generatePost("Testing Title", "I don't know", "This is || a paragraph"); generatePost("Testing Title", "I don't know", "This is || a paragraph"); generatePost("Testing Title", "I don't know", "This is || a paragraph"); }); </script>

Answer 1

Seems you were calling the generatePost() function too early (when document loads, but at the same time, thats also when you load your jQuery... why you were getting the ")" Missing error..). 似乎您太早调用了generatePost（）函数（在加载文档时，但是同时，这也就是在加载jQuery时的原因。。。为什么会出现“）” Missing error ..）。

So I changed the HTML to: 因此，我将HTML更改为：

<head>
</head>
<body>
    <main>
        <div class="container">
            <div id="postcontainer">

            </div>
        </div>
    </main>
</body>

And the jQuery to: 而jQuery可以：

$(document).ready(function() {
        function generatePost(title, time, text) {
        var postCount = 0;
        $('#postcontainer').append('<div id=' + "post_" + postCount +  '></div>').attr('class', 'content');
        $('#post_' + postCount).append('<h3>' + title + '</h3>').attr('id', 'post_h3_' + postCount);
        $('#post_h3_' + postCount).append('<span>' + time + '</span>');
        var paragraphs = text.split("||");

        for (var i = 0; i < paragraphs.length; i++) {
            var paragraphCount = 0;
            $('#post_' + postCount).append('<p>' + paragraphs[i] + '</p>').attr('id', 'post_p_' + postCount + '_' + paragraphCount);
            paragraphCount++;
        }
        postCount++;
    }  
         generatePost("Testing Title", "I don't know", "This is || a paragraph"); 
});

Just calling the function at the end of the document.ready. 只需在文档末尾调用该函数即可。 Also, as you can see, I also ran into some issues about how the post's id was being assigned, so ended up switching that up as well, assigning it with some simple string interpolation. 另外，正如您所看到的，我还遇到了一些有关如何分配帖子ID的问题，因此最终也切换了该ID，并使用一些简单的字符串插值对其进行了分配。

Cheers, 干杯，

PG PG

使用JavaScript和jQuery生成HTML-JavaScript无法执行？

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-11-19 22:46:43

使用JavaScript和jQuery生成HTML-JavaScript无法执行？

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-11-19 22:46:43

解决方案1
0 已采纳 2015-11-19 22:46:43