Question

我有一个问题，我想在html中创建一个div作为容器，并在javascript中根据用户提示输入的数字在容器中创建新的div。我的HTML和JavaScript看起来像这样。 HTML：

<!doctype html>
<html>
    <head>
      <link rel="stylesheet" href="stylesheet.css">
      <title>Sketchpad</title>
    </head>
<body>

    <button type="button">Reset</button>

    <div class= "container">



    </div>


    <script src="javascript.js"></script>
    <script src="jQuery.js"></script>
</body>

JS

var row = prompt("Enter number of rows:");
var column = prompt("Enter number of columns:");


function createGrid(){

var cont = document.getElementsByClassName('container');

for(i=1; i<column; i++){

    var sketchSquare = document.createElement('div');
    cont.appendChild(sketchSquare);
}

}
createGrid(column);

我最终得到了这个错误：未捕获的TypeError：cont.appendChild不是一个函数。我想这与getElementsByClassName有关？

我确实有一个解决方案，涉及在javascript中创建容器div并在容器div中附加较小的方块。我只是好奇为什么我的第一个解决方案没有用？

Answer 1

cont[0].appendChild(myDiv)是一个功能。当你记录.getElement s 按类名称时，你知道你正在获得很多元素（一系列元素）的元素，而这个数组并不具备与每个元素的功能相同。

像这样：

var thinkers = [
{think: function(){console.log('thinking');}
];

thinkers没有方法。思考但是thinkers[0].think()会有用。

试试这个：右击并执行inspect元素打开你的javascript控制台：然后输入：

var blah = document.getElementsByClassName('show-votes');
blah[0].appendChild(document.createElement('div'));

有效！如果你想使用jQuery，我确实看到你添加...

你可以这样做：

var cont = $('container');
cont.append('<div class="sketchSquare"></div>');

通过这样做尝试：

首先获得一个拥有jQuery的环境。
嗯，也许jQuery文档加载了jQuery！
他们这样做：http://api.jquery.com/append/。
在那里和控制台光标所在的底部打开控制台： $('.signature').append('<div style="background: pink; width: 300px; height: 300px"></div>');
您会注意到，您将大约300px ^ 2的粉红色方框添加到2个方框中，每个方框都有＆＃34;签名＆＃34;类。

顺便说一下，提示符会给你一个字符串，这样你就不得不row = Number(row);或row = parseInt(row, 10);而另一件事我不会使用全球for(var i = 0; ...

Answer 2

#!\bin\sh 

read -p "Enter Third Octet Here " octet
perl -ne 'while(/[0-9A-F]{2}[:-][0-9A-F]{2}[:-]("$ENV{'$octet'}")[:-][0-9A-F]{2}[:-][0-9A-F]{2}[:-][0-9A-F]{2}(?=((\s)|(\/)))/ig){print "$&\n";}' manuf.txt
perl -ne 'while(/[0-9A-F]{2}[:-][0-9A-F]{2}[:-]("$ENV{'$octet'}")(?=((\s)|(\/)))/ig){print "$&\n";}' manuf.txt

因为^没有返回节点，所以它会返回var cont = document.getElementsByClassName('container');。

https://www.w3.org/TR/2011/WD-html5-author-20110705/common-dom-interfaces.html#htmlcollection-0

您需要在追加之前从该集合中选择一个单独的节点。

Answer 3

可能会有一些问题导致这种情况发生。如果没有完全给出答案，那就是它可能处于高水平。

您的脚本在DOM完全加载之前运行。确保在页面中存在DOM后运行脚本。这可以使用DOMReady事件（$(document).ready equivalent without jQuery）完成，或者只是确保脚本标记是结束体标记之前的最后一个元素。（我通常更喜欢前者）
当您使用document.getElementsByClassName（＆＃39; container＆＃39;）（https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName）时，此方法返回一个数组，因此您需要将操作应用于结果的所有元素或只需选择零作为document.getElementsByClassName（＆＃39; container＆＃39;）[0]。作为替代方案，如果您希望更明确，您还可以在容器元素上放置一个id，而不是更明确地说明您要检索哪个元素。然后，您只需使用document.getElementById（[id]）（https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById），这将获得单个元素而不是集合。
提示的结果是一个字符串。因此，您必须首先使用parseInt（结果，10）将其解析为整数，其中10只是基数，或者更简单地说您想要一个0-10的数字。

Answer 4

你应该在脚本之前包含jquery库，这很重要

<script src="jQuery.js"></script>
<script src="javascript.js"></script>

在javascript问题中在现有div中创建div

4 个答案: