如何在jquery风格中实现这一点

我有以下代码：

<p><label for="mobtel">Enter mobile no.:</label><br />
<input id="mobtel" type="text" name="mobtel"/></p>

现在我想显示一个新标签和新输入，如下所示：

<p><label for="mobtel">Enter verification no.:</label><br />
<input id="verification_no" type="text" name="verification_no"/></p>

输入验证编号：

在jquery样式中如何执行此操作？

$（“p”）.append（'输入验证号：

$("p").append('<label for="mobtel">Enter verification no.:</label><br />
<input id="verification_no" type="text" name="verification_no"/>');

');

$（“正文”）。追加（'输入验证号：

）；

---

最简单的方法是在HTML中添加一个不可见的元素：

<p><label for="mobtel">Enter mobile no.:</label><br />
<input id="mobtel" type="text" name="mobtel"/></p>
<input id="verification_no" type="text" name="verification_no" style="display:none;"/></p>

---

或者，您也可以添加第二个标签并隐藏/显示它。

我只需在HTML中正常包含这两个标签，然后根据需要隐藏/显示：

<p id="mobtelField">
    <label for="mobtel">Enter mobile no.:</label><br />
    <input id="mobtel" type="text" name="mobtel"/>
</p>
<p id="verificationNoField">
    <label for="verification_no">Enter verification no.:</label><br />
    <input id="verification_no" type="text" name="verification_no"/>
</p>

CSS:

然后调用以使用：

showVerificationNo();

$("#icatmobtel").hide();
$("#verifion_no").show();
$("label[for=mobtel]").text("Enter verification no.:");
$("label[for=mobtel]").attr("for", "verifion_no");

<p id="mobtelField">
    <label for="mobtel">Enter mobile no.:</label><br />
    <input id="mobtel" type="text" name="mobtel"/>
</p>
<p id="verificationNoField">
    <label for="verification_no">Enter verification no.:</label><br />
    <input id="verification_no" type="text" name="verification_no"/>
</p>

function showVerificationNo(){
    $('#mobtelField').hide();
    $('#verificationNoField').show();
}
function showMobtel(){
    $('#verificationNoField').hide();
    $('#mobtelField').show();
}

#verificationNoField{
    display:none;
}

showVerificationNo();