我的追加似乎不起作用，尽管我控制台记录了它并且没有显示任何错误(新手问题)

Question

我正在练习函数并更动态地创建输入字段等，但由于某种原因，我无法将输入字段附加到我的字段中。 我使用了console.log()，并没有真正显示任何错误。我想知道我做错了什么以及如何更容易地防止这些新手错误。

我的网页：

<div class="container">
<div class="panel panel-primary">
<div class="panel-heading">
<h1>test</h1>
</div>
<div class="panel-body">
<form action="save.php" method="POST" id="testing">
</form>
<h1>test aswell</h1>
</div>
<div class="panel-footer">
<h1>test</h1>
</div>
</div>
</div>

My JavaScript/jquery：

function getEblock() {
let eBlock = ($('<div/>', {
'class': 'col-md-2'
}));
return eBlock;
}
$(getEblock()).appendTo('#testing');
$(getEblock()).append(getInputDistanceTime());
function getInputDistanceTime() {
let inputField = ($('<input/>', {
'type': 'text',
'name': 'distanceTime',
'placeholder': 'test',
'class': 'form form-control'
}));
return inputField;
}

标题的外观：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="index.js"></script>

我确实在我的标题中声明了所有内容。

Answer 1

你的getEblock函数返回一个div，而getInputDistanceTime返回一个输入。

我假设您需要将新创建的输入附加到新创建的div 中，并将此输入附加到测试表单中。

为了实现这一点，您需要更改代码：

$(getEblock().append(getInputDistanceTime())).appendTo('#testing');

步骤：

1. 创建div： getEblock((
2. 在此附加输入字段：getInputDistanceTime((
3. 将在步骤 1 中创建的div 附加到表单：.appendTo('#testing'(

function getEblock() {
let eBlock = ($('<div/>', {
'class': 'col-md-2'
}));
return eBlock;
}
function getInputDistanceTime() {
let inputField = ($('<input/>', {
'type': 'text',
'name': 'distanceTime',
'placeholder': 'test',
'class': 'form form-control'
}));
return inputField;
}
$(function () {
$(getEblock().append(getInputDistanceTime())).appendTo('#testing');
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="panel panel-primary">
<div class="panel-heading">
<h1>test</h1>
</div>
<div class="panel-body">
<form action="save.php" method="POST" id="testing">
</form>
<h1>test aswell</h1>
</div>
<div class="panel-footer">
<h1>test</h1>
</div>
</div>
</div>