Javascript 获取要在JSFIDLE示例上显示的jquery表单

正在学习JS/Jquery并回答问题

createProductCodeForm函数用于创建接受用户产品代码的新表单

表单的当前版本包含提示：“产品代码可在标签上找到”。此提示当前对用户始终可见

改进表单，使提示仅在输入元素是焦点元素时呈现

因此，我知道这与

focus（）

有关，但在我走到这一步之前，我想创建一个JSFIDLE，在那里我可以玩，并且在得到答案后可能会修改，但我很难让它显示出来。我想在小提琴右下角的屏幕上显示表单

到目前为止我得到了

我是否将id附加到表单上，或者如何使表单显示在js FIDLE的输出屏幕（右下角）上

function myFunction() {
  alert("hi");
  var form = $("<form/>");

  form.append($("<label>").text('Product Code:'));
  form.append($("<input>").attr('name', 'productCode').attr('type', 'text'));
  form.append($("<label>").attr('name', 'hint').text('The product code can be found on the label.'));

  form.append('<br>');

  form.append($("<input>").attr('type', 'submit'));

  parent.append(form);
}

<button onclick="myFunction()">Click me</button>

<div id="form1">

</div>

函数myFunction（）{
警报（“hi”）；
变量形式=$（“”）；
form.append（$（“”）.text（'产品代码：'）；
form.append（$（“”）.attr（'name'，'productCode'）.attr（'type'，'text'））；
form.append（$（“”）.attr（'name'，'hint'）.text（'可以在标签上找到产品代码'）；
格式。追加（“
”）；
form.append（$（“”）.attr（'type'，'submit'）；
父。追加（表格）；
}
点击我

请原谅，如果这是简单的…在学习阶段 谢谢你

函数myFunction（）{
变量形式=$（“形式”）；
表单.追加（“产品代码：产品代码可在标签上找到。
”；
$（“.hint”）.hide（）；
}
$（文档）.on（“焦点”，“输入”，函数（））{
$（“.hint”）.show（）；
});

点击我

函数myFunction（）{
var$输入；
var$hint；
变量形式=$（“”）；
form.append（$（“”）.text（'产品代码：'）；
append（$input=$（“”）.attr（'name'，'productCode'）.attr（'type'，'text'））；
form.append（$hint=$（“”）.attr（'name'，'hint'）.text（'产品代码可以在标签上找到'）；
格式。追加（“
”）；
form.append（$（“”）.attr（'type'，'submit'）；
$（'#form1'）。追加（表格）；
$input.on（'focus'，function（）{
$hint.show（）；
});
$input.on（'blur'，function（）{
$hint.hide（）；
});
}

点击我
这里是使用
ES6
模板文本的解决方案。检查这个


函数myFunction（）{
$（'#form1'）。追加(`
产品代码：
产品代码可以在标签上找到。


`
);
$（'input[name=“productCode”]”）。focus（）；
}

点击我
看看啊，非常好的男人谢谢你的帮助..现在添加焦点怎么样（），我只是添加了它和功能吗？我在下面给出了答案。。试试看。不，这是不正确的提示应该只在focusNow中的文本框显示，我修改了，这对你有帮助吗？