如何在 标签中对节点元素进行分组答案

【问题标题】：How to group node elements in a tag如何在 标签中对节点元素进行分组
【发布时间】：2016-02-20 01:12: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>

【问题讨论】：

标签： javascript if-statement for-loop button

【解决方案1】：

Node.appendChild() 会将新元素放在节点子节点列表的末尾，或者将现有元素移到那里。

在您的代码中，如果您想在一行中打印 4 #，请更改此行：

p1.appendChild(node1);

到

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

您的代码在分隔行中打印出#s 的原因是，带有一对标签 的元素p1 将在内容前后添加空格。

试试这个 HTML sn-p 你会得到它：

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

编辑

如果您想在输出中包含引号，请这样做：

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

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

【讨论】：

感谢您的帮助。代码似乎输出两组四个 '#''#''#''#' 然后在下一行输出正确的数量。
@fasteddie 你能告诉我你到底想要什么吗？要打印 N 行 # 吗？
我要做的是：用户输入一个数字，这个数字就是要显示的行数。每行包含四个“#”和四个空格，如下所示：“#”“#”“#”“#”感谢您的帮助。
@fasteddie 如果你想在你的输出中包含引号，这样做：var node1 = document.createTextNode('"#" "#" "#" "#"');，也就是说，在双引号周围使用单引号并在元素中放置空格。您无需重复插入多个文本节点即可输出一行内容。
非常感谢您的帮助，我现在可以正常工作了。