How to modify an HTML variable in jQuery?

Question

I am wanting to optimize my code found here: http://codepen.io/leongaban/pen/fJGie

Currently I have var inputphone which contains the default HTML for an input field.

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

From a select dropdown field I have several types the user can choose from (mobile, work, etc...) At the moment when the user selects a certain field I basically have to reuse the default HTML every time.

enter image description here

Is there a way that I can for example just put the default inputphone HTML into another variable like mobile_phone and then insert a string into the label, or into the name fields?

Something kinda like
mobile_phone.label = "Mobile Phone" or mobile_phone.html.find('label')?

Current code:

// 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);

Yes, but it would work better if you removed $() from around the string so that you simply have a string. .append will turn it into dom nodes. you can use basic string manipulation to make the changes to the string as needed. — user400654
– user400654, Commented Sep 26, 2013 at 22:06
You can also use .clone() to create a copy of the HTML element, then insert the clone. — Jasper
– Jasper, Commented Sep 26, 2013 at 22:09

Pete Cracknell · Accepted Answer · 2013-09-26 22:18:13Z

1

You could create a function that generates the text as you need:

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

answered Sep 26, 2013 at 22:18

Pete Cracknell

362 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Leon Gaban Over a year ago

Ugh another /facepalm moment! Of course I could have just done that, I guess it's late in the day and I'm got tunnelcode! Thanks :)

Kyle Muir · Accepted Answer · 2013-09-26 22:09:36Z

1

If you use a templating library like Underscore JS you can achieve it like this:

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

Fiddle: http://jsfiddle.net/KyleMuir/aygFB/

More info about underscore templates found here: http://underscorejs.org/#template

Hope this helps

answered Sep 26, 2013 at 22:09

Kyle Muir

3,9252 gold badges24 silver badges28 bronze badges

2 Comments

Jasper Over a year ago

This might be kind of a simple case for a whole templating framework. A simple .replace('{some key}', 'My New Label') would do the trick if you placed the string {some key} in your string of HTML where you want the replacement value. Good example though.

Leon Gaban Over a year ago

Oh that is so cool thanks :) didn't know about that framework! Will definitely use this in my project somewhere... I think Jasper is right, may add too much for what I need at the moment

Pete Cracknell · Accepted Answer · 2013-09-26 22:11:54Z

1

In your example, you could use:

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

answered Sep 26, 2013 at 22:11

Pete Cracknell

362 bronze badges

Collectives™ on Stack Overflow

How to modify an HTML variable in jQuery?

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related