如何在 <p> 标记中对节点元素进行分组

How to group node elements in a <p> tag

本文关键字：元素 节点      更新时间：2023-09-26

我想知道是否有人可以帮助我。 我遇到的问题是"#"和"空格"分别显示在它们自己的行上，我想要的是这样的布局（每行末尾没有引号）：

"####"

"####"

"####"

代码每行将显示四个"#"。长度由用户提示的数字决定。

非常感谢任何帮助，再次感谢。

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <title>Q3 Display</title>
    <style>
        .resultText {
            display: inline-block;
        }

    </style>
</head>
<body>
<div>
    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#q3" aria-controls="q3" role="tab" data-toggle="tab">Q3</a></li>
    </ul>
    <!-- Tab panes -->
    <div class="tab-content">

        <!-- Question 3 Start -->
        <div role="tabpanel" class="tab-pane tab-pane active" id="q3">
            <div class="row">
                <div class="col-md-12">
                    <pre>
                    Question 3 code:
                    </pre>
                </div>
                <div class="col-md-12">
                    <!-- button -->
                    <button id="q3-button" class="btn btn-default" type="button">Question Three Solution</button>
                </div>
                <div class="col-md-12">
                    <!-- result -->
                    <div id="result"></div>
                </div>
            </div>
        </div>

        <script>
            //Question 3
            //When the button is clicked, begin the function called start
            $("#q3-button").on("click", function () {
                start();
            });

            function start() {
            //Sets up user prompt
                var start = parseInt(prompt("How long would you like the side to be?"));
                //Determine if what was entered in prompt is a number
                if (isNaN(start)) {
                    alert("That's not a number, please retry.");
                    var start = prompt("Please re-enter a number.");
                }
                //Grabs the result div and assigns it a variable, will be used later on for result printing
                var element = document.getElementById("result");
                for (var i = 1; i <= start; i++) {

                    for (var j = 1; j <= 8; j++) {
                        if ((i + j) % 2 == 0) {

                            //Creates <p></p> element
                            var p1 = document.createElement("p");
                            //sets a class to the <p></p> element
                            p1.setAttribute("class", "resultText");
                            //Sets a variable to hold the text the <p></p> should contain
                            var node1 = document.createTextNode("#");
                            //Actually adds the text to the <p></p> element
                            p1.appendChild(node1);
                            //adds the <p></p> tag to the results div
                            element.appendChild(p1);
                        }
                        else {
                            //Creates <p></p> element
                            var p2 = document.createElement("p");
                            //p2.setAttribute("class", "resultText");
                            //Sets a variable to hold the text the <p></p> should contain (in this case an empty tag)
                            var node2 = document.createTextNode(" ");
                            //Actually adds the text to the <p></p> element
                            p2.appendChild(node2);
                            //adds the <p></p> tag to the results div
                            element.appendChild(p2);
                        }
                    }
                }
            }
        </script>
    </div>
</body>

</html>

>Node.appendChild()会将新元素放在节点子元素列表的末尾，或将现有元素移动到该位置。

在代码中，如果要在一行中打印 4 #，请更改以下行：

p1.appendChild(node1);

自

for (var i = 0; i < 4; i++ ) {
    p1.appendChild(node1);
}

您的代码在单独的行中打印出#的原因是，带有一对标记的元素p1 <p></p>将在内容前后添加空格。

试试这个HTML片段，你会得到它：

<p>Text1</p>
<p>Text2</p>

编辑

如果要在输出中包含引号，请按以下步骤操作：

var node1 = document.createTextNode('"#" "#" "#" "#"');

也就是说，在双引号两边使用单引号并在元素中放置空格。您无需重复插入多个文本节点即可输出一行内容。

相关文章：