javascript - 如何在 jQuery 中修改 HTML 变量？

Question

我想优化我在这里找到的代码:http://codepen.io/leongaban/pen/fJGie

目前我有 var inputphone，其中包含输入字段的默认 HTML。

var inputphone = $("<li><label></label><br/><input type='tel' pattern='[0-9]{10}' 
class='added_phone' name='' value='' autocomplete='off' maxlength='20' /></li>");

从选择下拉字段中，我有多种类型可供用户选择(移动、工作等...)当用户选择某个字段时，我基本上每次都必须重用默认的 HTML。

有没有一种方法可以让我将默认的输入电话 HTML 放入另一个变量(如 mobile_phone)中，然后将字符串插入到标签或名称字段中？

有点像
mobile_phone.label = "手机" 或 mobile_phone.html.find('label')？

当前代码:

// Default Phone Input
var inputphone = $("<li><label></label><br/><input type='tel' pattern='[0-9]{10}'
class='added_phone' name='' value='' autocomplete='off' maxlength='20' /></li>");

// Create new input for Mobile Phone
var mobile_phone = inputphone;
mobile_phone.html("<li><label>Mobile Phone</label><br/><input type='tel' pattern='[0-9]{10}' 
class='added_phone' name='mobile phone' value='' autocomplete='off' maxlength='20' /></li>");

// Add the Mobile Phone input to the page
$('.new_option').append(mobile_phone);

Answer 1

您可以创建一个函数来根据需要生成文本:

function createInput(labelText, nameText) {
    return $("<li><label>" + labelText+ "</label><br/><input type='tel' pattern='[0-9]{10}'
class='added_phone' name='" + nameText + "' value='' autocomplete='off' maxlength='20' /></li>");
}