如何在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"或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

如果您使用像Underscore JS这样的模板库，您可以这样实现：

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

var mobile_phone = item({label: 'Mobile Phone'});;

$('.new_option').append(mobile_phone);

小提琴：http://jsfiddle.net/KyleMuir/aygFB/

有关下划线模板的详细信息，请参阅此处：http://underscorejs.org/#template

希望这有帮助

Answer 2

在您的示例中，您可以使用：

mobile_phone.find('label').text('Mobile Phone')

Answer 3

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

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>");
}