使用Javascript将内容添加到HTML页面

时间:2016-10-29 13:00:18

标签: javascript html

好。所以,我正在尝试创建一个页面,显示我存储在计算机上的一堆笔记。因为我只是将页面保留在本地机器上,所以我想把这些笔记作为JavaScript函数保存在单独的文档中,这些文档会将注释添加到页面中。

然而,这还没有奏效,我正在努力创造我想要的效果。

在我看来,问题在于在其他脚本修改它们之前将注释添加到页面。目前,我还无法在页面上显示单个笔记,而且我没有收到任何错误。

如果有人能指出我哪里出错了,我们将不胜感激。我希望能够通过添加另一个JavaScript文档来添加尽可能多的笔记。

HTML文档:

<head>
    <meta charset="utf-8" lang="en">
    <script src="text1.js"></script>
    <script>
        var colours = [
            "rgba(254, 224,198,0.6)",
            "rgba(254,240,201,0.6)",
            "rgba(180,238,180,0.6)",
            "rgba(141,238,238,0.6)",
            "rgba(85,152,198,0.6)"
        ];

        var x;

        function sectionSelect(){
            x = document.getElementsByTagName("section");
        }

        function colourBG(){
            for(var i=0; i<= (x.length - 1); i++){
                var z = Math.floor(Math.random() * colours.length);
                x[i].style.backgroundColor = colours[z];
            };
        }
    </script>
</head>
<body>

    <script>
        sectionSelect();
        colourBG();
    </script>
</body>

在text1.js文档中:(这是我认为问题所在,但我不确定)

(function(){
var content = `
<section>
    <h1>Links</h1>
    <p><a href="" target="_blank"></a></p> //There are just a bunch of links here
</section>
`;
document.body.insertAdjacentHTML('afterbegin', content); })

非常感谢任何帮助。感谢

2 个答案:

答案 0 :(得分:1)

你的text1.js文件的问题在于它正在尝试执行IIFE(立即调用的函数表达式),但它实际上并没有调用它。因此,您必须在该脚本的末尾添加(),如下所示:

(function(){
var content = `
<section>
    <h1>Links</h1>
    <p><a href="" target="_blank"></a></p> //There are just a bunch of links here
</section>
`;
document.body.insertAdjacentHTML('afterbegin', content); })()

或者,你应该能够完全摆脱IIFE,只需要将文件包含在内:

var content = `
<section>
    <h1>Links</h1>
    <p><a href="" target="_blank"></a></p> //There are just a bunch of links here
</section>
`;
document.body.insertAdjacentHTML('afterbegin', content);

答案 1 :(得分:0)

试试这个

document.getElementById("parentID").appendChild(/*..your content created using DOM methods..*/)

document.getElementById("parentID").innerHTML+= "new content"

<script>
    for(var i=1; i<=3; i++) {
      alert("Rabbit "+i+" out of the hat!")
    }
  </script>