时间戳

首页 > 解决方案 > DOM 元素（节点）

javascript - DOM 元素（节点）

问题描述

我是 JS 新手，我尝试编写一个简单的 for 循环。但它不起作用。我想做一个循环来写this is the paragraph 1, this is the paragraph 2, ...

这是我的代码：

<body>

    <button id="makeP">Make yours paragraphs</button>

    <div id="block">
        <p></p>
    </div>

    <script>
        document.getElementById("makeP").onclick = makeParagraph;

        function makeParagraph() {
            var text = "this is the paragraph ";
            var i;
            for (i = 0; i < 11; i++) {
                var para = document.createElement("p");
                var node = document.createTextNode(text + i);
                para.appendChild(node);
                var element = document.getElementById("block");
                element.appendChild(para);
            }
        }


    </script>

</body>

我尝试使用，document.write()但在单击按钮后，我的所有文字都与文本一致，但按钮已被删除；

我尝试：

    <script>
        document.getElementById("makeP").onclick = makeParagraph;

        function makeParagraph() {
            var text = "this is the paragraph ";
            var i;
            for (i = 0; i < 11; i++) {
                var para = document.createElement("p");
                var node = document.createTextNode(text + i);
                para.appendChild(node);
                var element = document.getElementById("block");
                element.appendChild(para);
            }
        }


    </script>

它可以工作，但我不知道如何br在每个循环之后使用来区分不同的行。

标签： javascriptappendchild

解决方案

您的问题是，每次单击按钮时，您都在运行整个循环-每次按下按钮时，它都会从头到尾运行。我假设您想一次打印一个段落，同时将计数器加一。

您可以使用使用外部变量的回调函数来了解连续的段落编号，如下所示：

let i = 1;
document.getElementById("makeP").onclick = () => {
    if (10 >= i) { // limit the number of paragraphs to 10
        return;
    }
    const text = "this is the paragraph ";
    const para = document.createElement("p");
    const node = document.createTextNode(text + i);
    para.appendChild(node);
    const element = document.getElementById("block");
    element.appendChild(para);
    ++i;
}

将值在程序中不会改变的标记声明为常量也是一种很好的做法。每个段落应该已经在自己的行上，因为一个 html 段落在浏览器中显示为一个块，因此将占据其父容器的整个宽度（这里是整个文档）。

希望对您有所帮助，祝您学习 JS 好运！

推荐阅读