innerHTML vs cloneNode

JavaScript performance comparison

Revision 361 of this test case created by

Preparation code

<div style="width:1px;height:1px;overflow:hidden;">
<div id='box1'></div>
<div id='box2'></div>
<div id='box3'></div>
</div>
      
<script>
Benchmark.prototype.setup = function() {
  var testString = '<div id=foodCreator89654 class=foodCreator><div class=options ><ul id="exportmenu"><li><a class="bluebtn">Export To</a><ul><li><a href="/appdev1/foo/2173928071446026660" target="print">Preview</a></li><li><a href="/appdev1/foo/2173928071446026660&share=1" target="print">Share...</a></li><li><a href="/appdev1/foo/2173928071446026660&print=1" target="print" style="border-bottom:dotted 1px #888">Print...</a></li><li><a href="/appdev1/foo/2173928071446026660&download=pdf" target="_blank">PDF</a></li><li><a href="/appdev1/foo/2173928071446026660&download=csv" >Excel</a></li><li style="border-top:dotted 1px #888"><a href="/appdev1/fLabel/2173928071446026660" target="print">Food Label</a></li><li><a href="#?" onclick="loadCompare(0,0,2173928071446026660);">Compare</a></li><li></li></ul></li></ul><input type="text" value="Banana Oat Smoothie" id="name" name="name" maxlength="100" onchange="saveField(this,saveFoodField,groupFilter(food))" /><span class="smallText">Description: </span> <input type="text" value="" id="description" name="description" maxlength="170" onchange="saveField(this,saveFoodField)" /><a href="#" onclick="toggleDrop(this)" id="foodcat" class="togglebtn greybtn catBTN" title="Choose a category for this food">&nbsp;</a><input type="hidden" value="Recipe" name="cat" id="cat" /><div id="foodcatSub" class="submenu"><div style="position:fixed;"><a href="#" onclick="return(toggleDrop(foodcat,0))" class="delbtn fr" style="margin:-19px -17px 0 0">x</a></div><label class="head">Meat, Game & Poultry</label><label onclick="saveFoodCat(Animal Fats)"><span>Animal Fats</span></label><label onclick="saveFoodCat(Bacon)"><span>Bacon</span></label><label onclick="saveFoodCat(Beef)"><span>Beef</span></label><label onclick="saveFoodCat(Burgers & Grill)"><span>Burgers & Grill</span></label><label onclick="saveFoodCat(Chicken)"><span>Chicken</span></label><label onclick="saveFoodCat(Duck)"><span>Duck</span></label><label onclick="saveFoodCat(Goose)"><span>Goose</span></label><label onclick="saveFoodCat(Hare)"><span>Hare</span></label><label onclick="saveFoodCat(Lamb)"><span>Lamb</span></label><label onclick="saveFoodCat(Meat Dishes)"><span>Meat Dishes</span></label><label onclick="saveFoodCat(Meat Products)"><span>Meat Products</span></label><label onclick="saveFoodCat(Offal)"><span>Offal</span></label><label onclick="saveFoodCat(Partridge)"><span>Partridge</span></label><label onclick="saveFoodCat(Phesant)"><span>Phesant</span></label><label onclick="saveFoodCat(Pigeon)"><span>Pigeon</span></label><label onclick="saveFoodCat(Pork)"><span>Pork</span></label><label onclick="saveFoodCat(Rabbit)"><span>Rabbit</span></label><label onclick="saveFoodCat(Turkey)"><span>Turkey</span></label><label onclick="saveFoodCat(Veal)"><span>Veal</span></label><label onclick="saveFoodCat(Venison)"><span>Venison</span></label><label class="head">Fish & Seafood</label><label onclick="saveFoodCat(Canned Fish)"><span>Canned Fish</span></label><label onclick="saveFoodCat(Fish)"><span>Fish</span></label><label onclick="saveFoodCat(Fatty Fish)"><span>Fatty Fish</span></label><label onclick="saveFoodCat(Fish Dishes)"><span>Fish Dishes</span></label><label onclick="saveFoodCat(Fish Products)"><span>Fish Products</span></label><label onclick="saveFoodCat(Molluscs)"><span>Molluscs</span></label><label onclick="saveFoodCat(Seafood Dishes)"><span>Seafood Dishes</span></label><label onclick="saveFoodCat(White Fish)"><span>White Fish</span></label><label class="head">Bread, Cereals & Grains</label><label onclick="saveFoodCat(Breadrolls)"><span>Breadrolls</span></label><label onclick="saveFoodCat(Breads)"><span>Breads</span></label><label onclick="saveFoodCat(Cereal Bars)"><span>Cereal Bars</span></label><label onclick="saveFoodCat(Cereals)"><span>Cereals</span></label><label onclick="saveFoodCat(Crackers & Crispbreads)"><span>Crackers & Crispbreads</span></label><label onclick="saveFoodCat(Flours)"><span>Flours</span></label><label onclick="saveFoodCat(Grains)"><span>Grains</span></label><label onclick="saveFoodCat(Pastas)"><span>Pastas</span></label><label onclick="saveFoodCat(Rice)"><span>Rice</span></label><label class="head">Dairy & Eggs</label><label onclick="saveFoodCat(Cheeses)"><span>Cheeses</span></label><label onclick="saveFoodCat(Dairy Sauces)"><span>Dairy Sauces</span></label><label onclick="saveFoodCat(Drinking Yoghurts)"><span>Drinking Yoghurts</span></label><label onclick="saveFoodCat(Egg Dishes)"><span>Egg Dishes</span></label><label onclick="saveFoodCat(Eggs)"><span>Eggs</span></label><label onclick="saveFoodCat(Flavoured Milks)"><span>Flavoured Milks</span></label><label onclick="saveFoodCat(Fresh Creams)"><span>Fresh Creams</span></label><label onclick="saveFoodCat(Frozen Cream)"><span>Frozen Cream</span></label><label onclick="saveFoodCat(Ice Creams)"><span>Ice Creams</span></label><label onclick="saveFoodCat(Imitation Creams)"><span>Imitation Creams</span></label><label onclick="saveFoodCat(Low Fat Yoghurts)"><span>Low Fat Yoghurts</span></label><label onclick="saveFoodCat(Milk-Based Drinks)"><span>Milk-Based Drinks</span></label><label onclick="saveFoodCat(Milks)"><span>Milks</span></label><label onclick="saveFoodCat(Milkshakes & Smoothies)"><span>Milkshakes & Smoothies</span></label><label onclick="saveFoodCat(Non-Cows Milk)"><span>Non-Cows Milk</span></label><label onclick="saveFoodCat(Processed Milks)"><span>Processed Milks</span></label><label onclick="saveFoodCat(UHT Creams)"><span>UHT Creams</span></label><label onclick="saveFoodCat(Yoghurts)"><span>Yoghurts</span></label><label class="head">Fruits & Vegetables</label><label onclick="saveFoodCat(Canned Fruit)"><span>Canned Fruit</span></label><label onclick="saveFoodCat(Dried Fruit)"><span>Dried Fruit</span></label><label onclick="saveFoodCat(Dried Vegetables)"><span>Dried Vegetables</span></label><label onclick="saveFoodCat(Fruits)"><span>Fruits</span></label><label onclick="saveFoodCat(Fruit Juices)"><span>Fruit Juices</span></label><label onclick="saveFoodCat(Vegetable Juices)"><span>Vegetable Juices</span></label><label onclick="saveFoodCat(Vegetables)"><span>Vegetables</span></label><label onclick="saveFoodCat(Vegetables Dishes)"><span>Vegetables Dishes</span></label><label class="head">Beans & Potatoes</label><label onclick="saveFoodCat(Beans, peas & lentils)"><span>Beans, peas & lentils</span></label><label onclick="saveFoodCat(Potatoes)"><span>Potatoes</span></label><label onclick="saveFoodCat(Potato Products)"><span>Potato Products</span></label><label class="head">Nuts & Seeds</label><label onclick="saveFoodCat(Nuts & Seeds)"><span>Nuts & Seeds</span></label><label class="head">Sweets & Treats</label><label onclick="saveFoodCat(Biscuits)"><span>Biscuits</span></label><label onclick="saveFoodCat(Cakes)"><span>Cakes</span></label><label onclick="saveFoodCat(Cereal Bars)"><span>Cereal Bars</span></label><label onclick="saveFoodCat(Chocolate)"><span>Chocolate</span></label><label onclick="saveFoodCat(Chocolate Confectionary)"><span>Chocolate Confectionary</span></label><label onclick="saveFoodCat(Crisps)"><span>Crisps</span></label><label onclick="saveFoodCat(Non-Chocolate Confectionary)"><span>Non-Chocolate Confectionary</span></label><label onclick="saveFoodCat(Pastries & Buns)"><span>Pastries & Buns</span></label><label onclick="saveFoodCat(Pastry)"><span>Pastry</span></label><label onclick="saveFoodCat(Pies & Puddings)"><span>Pies & Puddings</span></label><label onclick="saveFoodCat(Chilled Desserts)"><span>Chilled Desserts</span></label><label onclick="saveFoodCat(Savoury Snacks)"><span>Savoury Snacks</span></label><label onclick="saveFoodCat(Soft Drinks)"><span>Soft Drinks</span></label><label onclick="saveFoodCat(Sweets)"><span>Sweets</span></label><label class="head">Composite Dishes & Meals</label><label onclick="saveFoodCat(Egg Dishes)"><span>Egg Dishes</span></label><label onclick="saveFoodCat(Fish Dishes)"><span>Fish Dishes</span></label><label onclick="saveFoodCat(Meat Dishes)"><span>Meat Dishes</span></label><label onclick="saveFoodCat(Pizzas)"><span>Pizzas</span></label><label onclick="saveFoodCat(Sandwiches)"><span>Sandwiches</span></label><label onclick="saveFoodCat(Savouries)"><span>Savouries</span></label><label onclick="saveFoodCat(Seafood Dishes)"><span>Seafood Dishes</span></label><label onclick="saveFoodCat(Vegetable Dishes)"><span>Vegetable Dishes</span></label><label class="head">Soups & Sandwiches</label><label onclick="saveFoodCat(Canned Soups)"><span>Canned Soups</span></label><label onclick="saveFoodCat(Home-Made Soups)"><span>Home-Made Soups</span></label><label onclick="saveFoodCat(Packet Soups)"><span>Packet Soups</span></label><label onclick="saveFoodCat(Sandwiches)"><span>Sandwiches</span></label><label onclick="saveFoodCat(Soups)"><span>Soups</span></label><label class="head">Drinks</label><label onclick="saveFoodCat(Alcoholic Drinks)"><span>Alcoholic Drinks</span></label><label onclick="saveFoodCat(Coffee)"><span>Coffee</span></label><label onclick="saveFoodCat(Drinking Yoghurts)"><span>Drinking Yoghurts</span></label><label onclick="saveFoodCat(Energy Drinks)"><span>Energy Drinks</span></label><label onclick="saveFoodCat(Fruit Drinks)"><span>Fruit Drinks</span></label><label onclick="saveFoodCat(Fruit Juices)"><span>Fruit Juices</span></label><label onclick="saveFoodCat(Milks)"><span>Milks</span></label><label onclick="saveFoodCat(Milkshakes & Smoothies)"><span>Milkshakes & Smoothies</span></label><label onclick="saveFoodCat(Powdered Drinks)"><span>Powdered Drinks</span></label><label onclick="saveFoodCat(Soft Drinks)"><span>Soft Drinks</span></label><label onclick="saveFoodCat(Sports Drinks)"><span>Sports Drinks</span></label><label onclick="saveFoodCat(Squash & Cordials)"><span>Squash & Cordials</span></label><label onclick="saveFoodCat(Teas)"><span>Teas</span></label><label onclick="saveFoodCat(Vegetable Juices)"><span>Vegetable Juices</span></label><label onclick="saveFoodCat(Water)"><span>Water</span></label><label class="head">Infant Foods & Formulas</label><label onclick="saveFoodCat(Non-whey modified drinks)"><span>Non-whey modified drinks</span></label><label onclick="saveFoodCat(Follow-on Formulas)"><span>Follow-on Formulas</span></label><label onclick="saveFoodCat(Semi-Elemental)"><span>Semi-Elemental</span></label><label onclick="saveFoodCat(Whey-based modified milk)"><span>Whey-based modified milk</span></label><label onclick="saveFoodCat(Soya-based modified milks)"><span>Soya-based modified milks</span></label><label onclick="saveFoodCat(Baby Foods Cereals)"><span>Baby Foods Cereals</span></label><label onclick="saveFoodCat(Baby Foods Canned/Bottled)"><span>Baby Foods Canned/Bottled</span></label><label onclick="saveFoodCat(Baby Foods Powdered/granulated)"><span>Baby Foods Powdered/granulated</span></label><label onclick="saveFoodCat(Infant & Paediatric Feeds)"><span>Infant & Paediatric Feeds</span></label><label class="head">Specialised/Clinical</label><label onclick="saveFoodCat(Dysphagia)"><span>Dysphagia</span></label><label onclick="saveFoodCat(Infant & Paediatric Feeds)"><span>Infant & Paediatric Feeds</span></label><label onclick="saveFoodCat(Specialised Drinks)"><span>Specialised Drinks</span></label><label onclick="saveFoodCat(Specialised Feeds)"><span>Specialised Feeds</span></label><label onclick="saveFoodCat(Specialised Snacks)"><span>Specialised Snacks</span></label><label onclick="saveFoodCat(Supplements)"><span>Supplements</span></label><label onclick="saveFoodCat(Tube Feeds)"><span>Tube Feeds</span></label><label class="head">Fats & Oils</label><label onclick="saveFoodCat(Cooking Butters)"><span>Cooking Butters</span></label><label onclick="saveFoodCat(Oils)"><span>Oils</span></label><label onclick="saveFoodCat(Spreading Fats)"><span>Spreading Fats</span></label><label class="head">Sweeteners & Preserves</label><label onclick="saveFoodCat(Pickles & Chutney)"><span>Pickles & Chutney</span></label><label onclick="saveFoodCat(Sugars, syrups & Preserves)"><span>Sugars, syrups & Preserves</span></label><label onclick="saveFoodCat(Sweeteners)"><span>Sweeteners</span></label><label class="head">Other</label><label onclick="saveFoodCat(Chewing Gum)"><span>Chewing Gum</span></label><label onclick="saveFoodCat(Essence)"><span>Essence</span></label><label onclick="saveFoodCat(Food Additives)"><span>Food Additives</span></label><label onclick="saveFoodCat(Herbs & Spices)"><span>Herbs & Spices</span></label><label onclick="saveFoodCat(Meat Substitutes)"><span>Meat Substitutes</span></label><label onclick="saveFoodCat(Miscellaneous)"><span>Miscellaneous</span></label><label onclick="saveFoodCat(Sauces)"><span>Sauces</span></label><label onclick="saveFoodCat(Supplements)"><span>Supplements</span></label><span class="btnWrapper"><a href="#" onclick="return(toggleDrop(foodcat,0));" class="bluebtn"> close </a></span></div></div><h5>Ingredient Cost ...</h5><div class="panelbody costings"><p class="largeText">This ingredient costs you<input type="text" value="£" id="currency" title="Purchase currency" onchange="saveField(this,saveFoodCustomField)" style="width:25px; text-align:right; border-right:0; margin-right:-5px;" /><input type="text" value="1" id="unitPrice" title="Purchase cost" onchange="saveField(this,saveFoodCustomField)" style="font-weight:bold;" />per <input type="text" value="100" id="unitWeight" title="Purchase quantity" onchange="saveField(this,saveFoodCustomField)" />g</p></div><h5>Overview ...</h5><div id=overview class=panelbody><div id="pievals" class="fr"><p class="col-carbs"><strong id="stats-carbs" title="25.602079013782">26</strong>% Carbs</p><p class="col-sugars"><strong id="stats-sugars" title="1.2621494713338">1</strong>% Sugars</p><p class="col-protein"><strong id="stats-protein" title="16.136749570781">16</strong>% Protein</p><p class="col-fat"><strong id="stats-fat" title="58.261171415437">58</strong>% Fat</p><p class="col-satfat"><strong id="stats-satfat" title="2.1109120078057">2</strong>% Satfat</p><p style="display:none;" class="col-alcohol"><strong id="stats-alcohol" title="0">0</strong>% Alcohol</p><!--<p class="grey em"><strong>22</strong> Quality Score</p>--></div><div id="piechart" class="fr"><canvas id="pie" width="400" height="300"> </canvas></div><p id="calbox" class="emptyList"><strong>213 Calories per 100<span class="gbox">g</span></strong></p><div class=foodphoto><iframe src=/control/scripts/ImageUploader/?f=/images-user/food/11502/89654.jpg&t=0#900*900*270*270 frameborder=0 id=foodimgframe></iframe></div></div><h5>Grouping &amp; Collaboration ...</h5><div class="panelbody"><div class="groups"><span id=dynamicGroups-food><a href=#? onclick=toggleGroup("test","food"); oncontextmenu=return(topframe.contextMenu("group","test","food", event)) class="on">test</a></span><a href=#? onClick=newGroup()>New Group...</a></div><div id="collabs"><a href="#" class="card blank" onclick="newCollab(food);return(false);">+ Add collaborator</a></div></div><h5><em class="grey fr">Database values, converted to labelling standards</em>Food Labelling...</h5><form id="labelWizard" class="panelbody"><p class="largeText" class="">Label values per <input type="text" value="100" id="recipeMonitor" name="recipeMonitor" onchange="saveField(this,changeFoodMonitor,loadFood,89654)" onclick="dropPortion(this,89654,undefined,1)" /><b class="gbox">g</b></p><div id="weightbox" style="width:300px;" class="hideonprint"><p class="bluehead">Custom Fields</p><table class=metaTable  id=foodMeta cellpadding=0 cellpadding=0><tr><td></td><td class=nopad><a href=#? class=bluebtn fr visibleonread id=customFieldBtn onclick=newMetaField("food","89654","")><span class=medText>+</span> Custom field</a></td></tr></table></div><table id="foodlabel" class="form splitform " cellspacing="0" ><tr><td></td><td colspan="2"><h3 class="smallText">Per 100g</h3></td><td></td></tr><tr onMouseOver="gd(nutSources&n=energyKcal,nutHint)"><tr ><td class="labelText">EnergyKcal</td><td class="unitval"><input type="text" name="energyKcal" value="212" /><span>kcal</span></td><td class="unitperc" title="Reference intake of an average adult (8400kJ/2000kcal) is 2000kcal"><span class="0 back">11%</span></td></tr><tr ><td class="labelText">Fat</td><td class="unitval"><input type="text" name="fat" value="13.8" /><span>g</span></td><td class="unitperc" title="Reference intake of an average adult (8400kJ/2000kcal) is 70g"><span class="orange back">20%</span></td></tr><tr ><td class="labelText"><span class="indent">of which saturates</span></td><td class="unitval"><input type="text" name="satfat" value="0.5" /><span>g</span></td><td class="unitperc" title="Reference intake of an average adult (8400kJ/2000kcal) is 20g"><span class="green back">3%</span></td></tr><tr ><td class="labelText">Carbohydrate</td><td class="unitval"><input type="text" name="carbohydrate" value="12.6" /><span>g</span></td><td class="unitperc" title="Reference intake of an average adult (8400kJ/2000kcal) is 260g"><span class="0 back">5%</span></td></tr><tr ><td class="labelText"><span class="indent">of which sugars</span></td><td class="unitval"><input type="text" name="sugars" value="0.7" /><span>g</span></td><td class="unitperc" title="Reference intake of an average adult (8400kJ/2000kcal) is 90g"><span class="green back">1%</span></td></tr><tr ><td class="labelText">Fibre</td><td class="unitval"><input type="text" name="fibre" value="1.4" /><span>g</span></td><td class="unitperc" title="Reference intake of an average adult (8400kJ/2000kcal) is 25g"><span class="0 back">6%</span></td></tr><tr ><td class="labelText">Protein</td><td class="unitval"><input type="text" name="protein" value="8.6" /><span>g</span></td><td class="unitperc" title="Reference intake of an average adult (8400kJ/2000kcal) is 50g"><span class="0 back">17%</span></td></tr><tr ><td class="labelText">Salt</td><td class="unitval"><input type="text" name="salt" value="0" /><span>g</span></td><td class="unitperc" title="Reference intake of an average adult (8400kJ/2000kcal) is g"><span class="green back">0%</span></td></tr><tr><td colspan="2"><a href="#" class="bluebtn largebtn fr" onclick="labelWizard()">Submit label values</a></td></tr></table><input type="hidden" value="1.07692" name="nsp" id="nsp" /></form><table id="recTable" cellspacing="0" cellpadding="0" class=""><h5><em class="grey fr">Allergen information is indicative</em>Categorisation &amp; Allergy info ...</h5><div class="panelbody "><div id="allergyinfo"><a href="#" onclick="toggleBtn(toggleFoodProp,recalcAllergens)" id="toggleValrecalcAllergens" style="float:right;" class="on1" title="Disable this toggle to change allergens manually"></a><div id="foodProps"><label class=on id=toggleValp-liquid onclick=isLiquid(this.className=="on");;toggleBtn("toggleFoodProp","p-liquid"); oncontextmenu=return(topframe.contextMenu("foodProp", "p-liquid",0, event)) ><svg viewBox=0 0 30 30 class=icon allergenicon icon-liquid><use xlink:href=#icon-liquid></use></svg><span>Is a liquid</span></label><label class=on id=toggleValp-vegetarian onclick=;toggleBtn("toggleFoodProp","p-vegetarian"); oncontextmenu=return(topframe.contextMenu("foodProp", "p-vegetarian",0, event)) ><svg viewBox=0 0 30 30 class=icon allergenicon icon-vegetarian><use xlink:href=#icon-vegetarian></use></svg><span>Vegetarian</span></label><label class=on id=toggleValp-vegan onclick=;toggleBtn("toggleFoodProp","p-vegan"); oncontextmenu=return(topframe.contextMenu("foodProp", "p-vegan",0, event)) ><svg viewBox=0 0 30 30 class=icon allergenicon icon-vegan><use xlink:href=#icon-vegan></use></svg><span>Vegan</span></label><label class=on id=toggleValp-glutenfree onclick=;toggleBtn("toggleFoodProp","p-glutenfree"); oncontextmenu=return(topframe.contextMenu("foodProp", "p-glutenfree",0, event)) ><svg viewBox=0 0 30 30 class=icon allergenicon icon-glutenfree><use xlink:href=#icon-glutenfree></use></svg><span>Gluten Free</span></label><label class=on id=toggleValp-kosher onclick=;toggleBtn("toggleFoodProp","p-kosher"); oncontextmenu=return(topframe.contextMenu("foodProp", "p-kosher",0, event)) ><svg viewBox=0 0 30 30 class=icon allergenicon icon-kosher><use xlink:href=#icon-kosher></use></svg><span>Kosher</span></label><label class=on id=toggleValp-halal onclick=;toggleBtn("toggleFoodProp","p-halal"); oncontextmenu=return(topframe.contextMenu("foodProp", "p-halal",0, event)) ><svg viewBox=0 0 30 30 class=icon allergenicon icon-halal><use xlink:href=#icon-halal></use></svg><span>Halal</span></label></div><div id=foodAllergens><label class=on id=toggleValc-gluten onclick=;toggleBtn("toggleFoodProp","c-gluten"); oncontextmenu=return(topframe.contextMenu("foodAllergen", "c-gluten",0, event)) ><svg viewBox=0 0 30 30 class=icon allergenicon icon-gluten><use xlink:href=#icon-gluten></use></svg><span>Gluten</span></label><label class=on2 id=toggleValc-peanuts onclick=;toggleBtn("toggleFoodProp","c-peanuts"); oncontextmenu=return(topframe.contextMenu("foodAllergen", "c-peanuts",0, event)) ><svg viewBox=0 0 30 30 class=icon allergenicon icon-peanuts><use xlink:href=#icon-peanuts></use></svg><span>Peanuts</span></label><label class=on2 id=toggleValc-nuts onclick=;toggleBtn("toggleFoodProp","c-nuts"); oncontextmenu=return(topframe.contextMenu("foodAllergen", "c-nuts",0, event)) ><svg viewBox=0 0 30 30 class=icon allergenicon icon-nuts><use xlink:href=#icon-nuts></use></svg><span>Tree nuts</span></label><label class=on id=toggleValc-celery onclick=;toggleBtn("toggleFoodProp","c-celery"); oncontextmenu=return(topframe.contextMenu("foodAllergen", "c-celery",0, event)) ><svg viewBox=0 0 30 30 class=icon allergenicon icon-celery><use xlink:href=#icon-celery></use></svg><span>Celery</span></label><label class=on id=toggleValc-mustard onclick=;toggleBtn("toggleFoodProp","c-mustard"); oncontextmenu=return(topframe.contextMenu("foodAllergen", "c-mustard",0, event)) ><svg viewBox=0 0 30 30 class=icon allergenicon icon-mustard><use xlink:href=#icon-mustard></use></svg><span>Mustard</span></label><label class=on id=toggleValc-eggs onclick=;toggleBtn("toggleFoodProp","c-eggs"); oncontextmenu=return(topframe.contextMenu("foodAllergen", "c-eggs",0, event)) ><svg viewBox=0 0 30 30 class=icon allergenicon icon-eggs><use xlink:href=#icon-eggs></use></svg><span>Eggs</span></label><label class=on id=toggleValc-milk onclick=;toggleBtn("toggleFoodProp","c-milk"); oncontextmenu=return(topframe.contextMenu("foodAllergen", "c-milk",0, event)) ><svg viewBox=0 0 30 30 class=icon allergenicon icon-milk><use xlink:href=#icon-milk></use></svg><span>Milk</span></label><label class=on id=toggleValc-sesame onclick=;toggleBtn("toggleFoodProp","c-sesame"); oncontextmenu=return(topframe.contextMenu("foodAllergen", "c-sesame",0, event)) ><svg viewBox=0 0 30 30 class=icon allergenicon icon-sesame><use xlink:href=#icon-sesame></use></svg><span>Sesame</span></label><label class=on2 id=toggleValc-fish onclick=;toggleBtn("toggleFoodProp","c-fish"); oncontextmenu=return(topframe.contextMenu("foodAllergen", "c-fish",0, event)) ><svg viewBox=0 0 30 30 class=icon allergenicon icon-fish><use xlink:href=#icon-fish></use></svg><span>Fish</span></label><label class=on id=toggleValc-crustaceans onclick=;toggleBtn("toggleFoodProp","c-crustaceans"); oncontextmenu=return(topframe.contextMenu("foodAllergen", "c-crustaceans",0, event)) ><svg viewBox=0 0 30 30 class=icon allergenicon icon-crustaceans><use xlink:href=#icon-crustaceans></use></svg><span>Crustaceans</span></label><label class=on id=toggleValc-molluscs onclick=;toggleBtn("toggleFoodProp","c-molluscs"); oncontextmenu=return(topframe.contextMenu("foodAllergen", "c-molluscs",0, event)) ><svg viewBox=0 0 30 30 class=icon allergenicon icon-molluscs><use xlink:href=#icon-molluscs></use></svg><span>Molluscs</span></label><label class=on2 id=toggleValc-soya onclick=;toggleBtn("toggleFoodProp","c-soya"); oncontextmenu=return(topframe.contextMenu("foodAllergen", "c-soya",0, event)) ><svg viewBox=0 0 30 30 class=icon allergenicon icon-soya><use xlink:href=#icon-soya></use></svg><span>Soya</span></label><label class=on id=toggleValc-sulphites onclick=;toggleBtn("toggleFoodProp","c-sulphites"); oncontextmenu=return(topframe.contextMenu("foodAllergen", "c-sulphites",0, event)) ><svg viewBox=0 0 30 30 class=icon allergenicon icon-sulphites><use xlink:href=#icon-sulphites></use></svg><span>Sulphites</span></label><label class=on id=toggleValc-lupin onclick=;toggleBtn("toggleFoodProp","c-lupin"); oncontextmenu=return(topframe.contextMenu("foodAllergen", "c-lupin",0, event)) ><svg viewBox=0 0 30 30 class=icon allergenicon icon-lupin><use xlink:href=#icon-lupin></use></svg><span>Lupin</span></label></div></div><hr id="allergyHint"/></div><h5>Food detail ...</h5><div class=panelbody><label class=fr smallText caps hideonprint title=Your inputted data will be automatically converted to database standards if this is checked>Recalculate input &nbsp;<input type=checkbox id=autoRecalc checked /></label><p class=largeText>Label values per <input type="text" value="100" id="recipeMonitor" name="recipeMonitor" onchange="saveField(this,changeFoodMonitor,loadFood,89654)" onclick="dropPortion(this,89654,undefined,1)" /><b class=gbox>g</b>:</p><div id=foodContent class=form splitform ><div class=grouphead>- Energy -</div><label id=foodlabel-energyKcal><span>energyKcal <span></span></span><input type=text id=energyKcal value=213 onchange=;saveField(this,"saveFoodField",0);vis("unavailable",0) class=autocalc /></label><label id=foodlabel-energyKj><span>energyKj <span></span></span><input type=text id=energyKj value=889 onchange=;saveField(this,"saveFoodField",0);vis("unavailable",0) class=autocalc /></label><hr /><div class=grouphead>- Macronutrients -</div><label id=foodlabel-carbohydrate><span>carbohydrate <span>(g)</span></span><input type=text id=carbohydrate value=13.8 onchange=;saveField(this,"saveFoodField",0);vis("unavailable",0) class=autocalc /></label><label id=foodlabel-protein><span>protein <span>(g)</span></span><input type=text id=protein value=8.6 onchange=;saveField(this,"saveFoodField",recalcFood);vis("unavailable",0) class=autocalc /></label><label id=foodlabel-fat><span>fat <span>(g)</span></span><input type=text id=fat value=13.8 onchange=;saveField(this,"saveFoodField",recalcFood);vis("unavailable",0) class=autocalc /></label><label id=foodlabel-water><span>water <span>(ml)</span></span><input type=text id=water value=63 onchange=;saveField(this,"saveFoodField",0);vis("unavailable",0) class=autocalc /></label><label id=foodlabel-alcohol><span>alcohol <span>(g)</span></span><input type=text id=alcohol value=0 onchange=;saveField(this,"saveFoodField",recalcFood);vis("unavailable",0) class=autocalc /></label><hr /><div class=grouphead>- Carbohydrate -</div><label id=foodlabel-starch><span>starch <span>(g)</span></span><input type=text id=starch value=13.1 onchange=;saveField(this,"saveFoodField",recalcFood);vis("unavailable",0) class=autocalc /></label><label id=foodlabel-oligosaccharide><span>oligosaccharide <span>(g)</span></span><input type=text id=oligosaccharide value=0 onchange=;saveField(this,"saveFoodField",recalcFood);vis("unavailable",0) class=autocalc /></label><label id=foodlabel-fibre><span>fibre <span>(g)</span></span><input type=text id=fibre value=1.4 onchange=;saveField(this,"saveFoodField",recalcFood);vis("unavailable",0) class=autocalc /></label><label id=foodlabel-nsp><span>nsp <span>(g)</span></span><input type=text id=nsp value=1.1 onchange=;saveField(this,"saveFoodField",0);vis("unavailable",0) class=autocalc /></label><label id=foodlabel-sugars><span>sugars <span>(g)</span></span><input type=text id=sugars value=0.7 onchange=;saveField(this,"saveFoodField",recalcFood);vis("unavailable",0) class=autocalc /></label><label id=foodlabel-freesugars><span>freesugars <span>(g)</span></span><input type=text id=freesugars value=0 onchange=;saveField(this,"saveFoodField",0);vis("unavailable",0) class=autocalc /></label><label id=foodlabel-glucose><span>glucose <span>(g)</span></span><input type=text id=glucose value=0.2 onchange=;saveField(this,"saveFoodField",0);vis("unavailable",0) class=autocalc /></label><label id=foodlabel-galactose><span>galactose <span>(g)</span></span><input type=text id=galactose value=0 onchange=;saveField(this,"saveFoodField",0);vis("unavailable",0) class=autocalc /></label><label id=foodlabel-fructose><span>fructose <span>(g)</span></span><input type=text id=fructose value=0.2 onchange=;saveField(this,"saveFoodField",0);vis("unavailable",0) class=autocalc /></label><label id=foodlabel-sucrose><span>sucrose <span>(g)</span></span><input type=text id=sucrose value=0.4 onchange=;saveField(this,"saveFoodField",0);vis("unavailable",0) class=autocalc /></label><label id=foodlabel-maltose><span>maltose <span>(g)</span></span><input type=text id=maltose value=0 onchange=;saveField(this,"saveFoodField",0);vis("unavailable",0) class=autocalc /></label><label id=foodlabel-lactose><span>lactose <span>(g)</span></span><input type=text id=lactose value=0 onchange=;saveField(this,"saveFoodField",0);vis("unavailable",0) class=autocalc /></label><hr /><div class=grouphead>- Lipid Components -</div><label id=foodlabel-satfat><span>satfat <span>(g)</span></span><input type=text id=satfat value=0.5 onchange=;saveField(this,"saveFoodField",0);vis("unavailable",0) class=autocalc /></label><label id=foodlabel-monos><span>monos <span>(g)</span></span><input type=text id=monos value=2.8 onchange=;saveField(this,"saveFoodField",0);vis("unavailable",0) class=autocalc /></label><label id=foodlabel-cismonos><span>cismonos <span>(g)</span></span><input type=text id=cismonos value=0 onchange=;saveField(this,"saveFoodField",0);vis("unavailable",0) class=autocalc /></label><label id=foodlabel-poly><span>poly <span>(g)</span></span><input type=text id=poly value=2 onchange=;saveField(this,"saveFoodField",0);vis("unavailable",0) class=autocalc /></label><label id=foodlabel-n3poly><span>n3poly <span>(g)</span></span><input type=text id=n3poly value=0 onchange=;saveField(this,"saveFoodField",0);vis("unavailable",0) class=autocalc /></label><label id=foodlabel-n6poly><span>n6poly <span>(g)</span></span><input type=text id=n6poly value=0 onchange=;saveField(this,"saveFoodField",0);vis("unavailable",0) class=autocalc /></label><label id=foodlabel-cispoly><span>cispoly <span>(g)</span></span><input type=text id=cispoly value=0 onchange=;saveField(this,"saveFoodField",0);vis("unavailable",0) class=autocalc /></label><label id=foodlabel-trans><span>trans <span>(g)</span></span><input type=text id=trans value=0 onchange=;saveField(this,"saveFoodField",0);vis("unavailable",0) class=autocalc /></label><label id=foodlabel-cholesterol><span>cholesterol <span>(mg)</span></span><input type=text id=cholesterol value=0 onchange=;saveField(this,"saveFoodField",0);vis("unavailable",0) class=autocalc /></label><hr /><div class=grouphead>- Minerals &amp; trace elements -</div><label id=foodlabel-sodium><span>sodium <span>(mg)</span></span><input type=text id=sodium value=0 onchange=;saveField(this,"saveFoodField",0);vis("unavailable",0) class=autocalc /></label><label id=foodlabel-potassium><span>potassium <span>(mg)</span></span><input type=text id=potassium value=298 onchange=;saveField(this,"saveFoodField",recalcFood);vis("unavailable",0) class=autocalc /></label><label id=foodlabel-chloride><span>chloride <span>(mg)</span></span><input type=text id=chloride value=0 onchange=;saveField(this,"saveFoodField",0);vis("unavailable",0) class=autocalc /></label><label id=foodlabel-calcium><span>calcium <span>(mg)</span></span><input type=text id=calcium value=5 onchange=;saveField(this,"saveFoodField",recalcFood);vis("unavailable",0) class=autocalc /></label><label id=foodlabel-phosphorus><span>phosphorus <span>(mg)</span></span><input type=text id=phosphorus value=28 onchange=;saveField(this,"saveFoodField",recalcFood);vis("unavailable",0) class=autocalc /></label><label id=foodlabel-magnesium><span>magnesium <span>(mg)</span></span><input type=text id=magnesium value=14 onchange=;saveField(this,"saveFoodField",recalcFood);vis("unavailable",0) class=autocalc /></label><label id=foodlabel-iron><span>iron <span>(mg)</span></span><input type=text id=iron value=0.4 onchange=;saveField(this,"saveFoodField",0);vis("unavailable",0) class=autocalc /></label><label id=foodlabel-zinc><span>zinc <span>(mg)</span></span><input type=text id=zinc value=0.3 onchange=;saveField(this,"saveFoodField",0);vis("unavailable",0) class=autocalc /></label><label id=foodlabel-copper><span>copper <span>(mg)</span></span><input type=text id=copper value=0.1 onchange=;saveField(this,"saveFoodField",0);vis("unavailable",0) class=autocalc /></label><label id=foodlabel-manganese><span>manganese <span>(mg)</span></span><input type=text id=manganese value=0.1 onchange=;saveField(this,"saveFoodField",0);vis("unavailable",0) class=autocalc /></label><label id=foodlabel-selenium><span>selenium <span>(µg)</span></span><input type=text id=selenium value=0.9 onchange=;saveField(this,"saveFoodField",0);vis("unavailable",0) class=autocalc /></label><label id=foodlabel-iodine><span>iodine <span>(µg)</span></span><input type=text id=iodine value=2.3 onchange=;saveField(this,"saveFoodField",0);vis("unavailable",0) class=autocalc /></label><hr /><div class=grouphead>- Vitamins -</div><label id=foodlabel-vita><span>vita <span>(µg)</span></span><input type=text id=vita value=0 onchange=;saveField(this,"saveFoodField",0);vis("unavailable",0) class=autocalc /></label><label id=foodlabel-retinol><span>retinol <span>(µg)</span></span><input type=text id=retinol value=0 onchange=;saveField(this,"saveFoodField",0);vis("unavailable",0) class=autocalc /></label><label id=foodlabel-carotene><span>carotene <span>(µg)</span></span><input type=text id=carotene value=0 onchange=;saveField(this,"saveFoodField",0);vis("unavailable",0) class=autocalc /></label><label id=foodlabel-vitd><span>vitd <span>(µg)</span></span><input type=text id=vitd value=0 onchange=;saveField(this,"saveFoodField",0);vis("unavailable",0) class=autocalc /></label><label id=foodlabel-vite><span>vite <span>(mg)</span></span><input type=text id=vite value=0 onchange=;saveField(this,"saveFoodField",0);vis("unavailable",0) class=autocalc /></label><label id=foodlabel-vitk><span>vitk <span>(µg)</span></span><input type=text id=vitk value=0 onchange=;saveField(this,"saveFoodField",0);vis("unavailable",0) class=autocalc /></label><label id=foodlabel-thiamin><span>thiamin <span>(mg)</span></span><input type=text id=thiamin value=0 onchange=;saveField(this,"saveFoodField",0);vis("unavailable",0) class=autocalc /></label><label id=foodlabel-riboflavin><span>riboflavin <span>(mg)</span></span><input type=text id=riboflavin value=0 onchange=;saveField(this,"saveFoodField",0);vis("unavailable",0) class=autocalc /></label><label id=foodlabel-niacineqv><span>niacineqv <span>(mg)</span></span><input type=text id=niacineqv value=0.7 onchange=;saveField(this,"saveFoodField",0);vis("unavailable",0) class=autocalc /></label><label id=foodlabel-niacin><span>niacin <span>(mg)</span></span><input type=text id=niacin value=0.3 onchange=;saveField(this,"saveFoodField",0);vis("unavailable",0) class=autocalc /></label><label id=foodlabel-tryptophan><span>tryptophan <span>(mg)</span></span><input type=text id=tryptophan value=0.4 onchange=;saveField(this,"saveFoodField",0);vis("unavailable",0) class=autocalc /></label><label id=foodlabel-pantothenate><span>pantothenate <span>(mg)</span></span><input type=text id=pantothenate value=0.1 onchange=;saveField(this,"saveFoodField",0);vis("unavailable",0) class=autocalc /></label><label id=foodlabel-vitb6><span>vitb6 <span>(mg)</span></span><input type=text id=vitb6 value=0.1 onchange=;saveField(this,"saveFoodField",0);vis("unavailable",0) class=autocalc /></label><label id=foodlabel-folate><span>folate <span>(µg)</span></span><input type=text id=folate value=0 onchange=;saveField(this,"saveFoodField",0);vis("unavailable",0) class=autocalc /></label><label id=foodlabel-vitb12><span>vitb12 <span>(µg)</span></span><input type=text id=vitb12 value=0 onchange=;saveField(this,"saveFoodField",0);vis("unavailable",0) class=autocalc /></label><label id=foodlabel-biotin><span>biotin <span>(µg)</span></span><input type=text id=biotin value=0.2 onchange=;saveField(this,"saveFoodField",0);vis("unavailable",0) class=autocalc /></label><label id=foodlabel-vitc><span>vitc <span>(mg)</span></span><input type=text id=vitc value=4.1 onchange=;saveField(this,"saveFoodField",0);vis("unavailable",0) class=autocalc /></label><hr /><div class=grouphead>- Other -</div><label id=foodlabel-gi><span>gi <span></span></span><input type=text id=gi value=47 onchange=;saveField(this,"saveFoodField",recalcFood);vis("unavailable",0) class=autocalc /></label><label id=foodlabel-gl><span>gl <span></span></span><input type=text id=gl value=6.5 onchange=;saveField(this,"saveFoodField",0);vis("unavailable",0) class=autocalc /></label><label id=foodlabel-pral><span>pral <span></span></span><input type=text id=pral value=-1 onchange=;saveField(this,"saveFoodField",0);vis("unavailable",0) class=autocalc /></label><hr /></div></div><hr /><table id="foodTable" cellspacing="0" cellpadding="0" class=""><tr class="thead hideonprint"><td class="td-food" colspan="2" style="padding-left:10px;">Portion size options:</td><td class="td-quantity">Quantity:</td><td class="td-quantity">Unit:</td></tr><tr class="hideonprint"><td class="td-del monitor">1</td><td class="td-food"><input type="text" value="" onChange="savePortionDetail(this,,measure1)"/></td><td class="td-quantity"><input type="text" value="" onChange="savePortionDetail(this,,measure1val)"/></td><td class="td-optgroup hideonprint" style="border-bottom-width:2px"><input type="text" tabindex="" value="" onChange="savePortionDetail(this,,measure_unit)"/></td></tr><tr class="hideonprint"><td class="td-del monitor">2</td><td class="td-food"><input type="text" value="" onChange="savePortionDetail(this,,measure2)"/></td><td class="td-quantity"><input type="text" value="" onChange="savePortionDetail(this,,measure2val)"/></td><td class="td-optgroup hideonprint" style="border:0">&nbsp;</td></tr><tr class="hideonprint"><td class="td-del monitor">3</td><td class="td-food"><input type="text" value="" onChange="savePortionDetail(this,,measure3)"/></td><td class="td-quantity"><input type="text" value="" onChange="savePortionDetail(this,,measure3val)"/></td><td class="td-optgroup hideonprint" style="border:0">&nbsp;</td></tr><tr class="hideonprint"><td class="td-del monitor">4</td><td class="td-food"><input type="text" value="" onChange="savePortionDetail(this,,measure4)"/></td><td class="td-quantity"><input type="text" value="" onChange="savePortionDetail(this,,measure4val)"/></td><td class="td-optgroup hideonprint" style="border:0">&nbsp;</td></tr><tr class="hideonprint"><td class="td-del monitor">5</td><td class="td-food"><input type="text" value="" onChange="savePortionDetail(this,,measure5)"/></td><td class="td-quantity"><input type="text" value="" onChange="savePortionDetail(this,,measure5val)"/></td><td class="td-optgroup hideonprint" style="border:0">&nbsp;</td></tr><tr class="thead noborder" id="noteshead"><td class="td-del"></td><td colspan="3" class="td-food"><span>Notes:</span></td></tr><tr class="noborder"><td colspan="4" class="nopad"><div id="notesdiv"><textarea id="notes-food" class="notes" onChange="gd(saveTextField&type=food&v=+encodeURIComponent(this.value))"></textarea></div></td></tr></table><div class="panelbody"><p class="smallText">U Ref Code: <strong></strong> | Last Modified:9 Nov 2015 | Nutritics ID: U89654</p></div></div>';
  
  function replaceHtml(el,html) {
  	var oldEl = (typeof el === "string" ? document.getElementById(el) : el);
  	var newEl = oldEl.cloneNode(true);
  	newEl.innerHTML = html;
  	oldEl.parentNode.replaceChild(newEl, oldEl);
  }
  
  document.getElementById("box1").innerHTML = testString;

};
</script>

Preparation code output

<div style="width:1px;height:1px;overflow:hidden;"> <div id='box1'></div> <div id='box2'></div> <div id='box3'></div> </div>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
replaceHtml
replaceHtml('box1',testString);
pending…
innerHTML
document.getElementById("box1").innerHTML = testString;
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL.

0 Comments