Set HTML tag values dynamically</a></h1> </div> <div class="grid fw-wrap pb8 mb16 bb bc-black-075"> <div class="grid--cell ws-nowrap mr16 mb8" title="2016-01-12 19:07:53Z"> <span class="fc-light mr2">Asked</span> <time itemprop="dateCreated" datetime="2014-06-27T15:14:55.300" class="fromnow">Jun 27 '14 at 15:14</time> </div> <div class="grid--cell ws-nowrap mr16 mb8"> <span class="fc-light mr2">Active</span> <time class="fromnow" title="2018-07-22T23:38:09.757" datetime="2018-07-22T23:38:09.757">Jul 22 '18 at 23:38</a> </div> <div class="grid--cell ws-nowrap mb8" title="Viewed 8,419 times"> <span class="fc-light mr2">Viewed</span> 8,419 times </div> </div> <div id="mainbar" role="main" aria-label="questions and answers"> <div id="question" class="question" data-questionid="24455248" data-ownerid="1468484" data-score="-2"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="24455248"> <button class="js-vote-up-btn grid--cell s-btn s-btn__unset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="-2">-2</div> <button class="js-bookmark-btn s-btn s-btn__unset c-pointer py4"> <svg aria-hidden="true" class="svg-icon iconBookmark" width="18" height="18" viewBox="0 0 18 18"><path d="M6 1a2 2 0 00-2 2v14l5-4 5 4V3a2 2 0 00-2-2H6zm3.9 3.83h2.9l-2.35 1.7.9 2.77L9 7.59l-2.35 1.7.9-2.76-2.35-1.7h2.9L9 2.06l.9 2.77z"></path></svg> <div class="js-bookmark-count mt4" data-value=""></div> </button> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>I have an HTML page. The aim is to set the <code><title></code> tag dynamically.</p> <p>Using this Ajax call to get data to be inserted inside title tag as below</p> <pre class="lang-js prettyprint-override s-code-block"><code> $.get("/" + $.flydubai.config.CurrentLanguageCode + "/error/PageTitle/", function (data) { document.title = data; }); </code></pre> <p>Now, I want to update <em>not</em> the browser title but the HTML <code><title></title></code> tag itself. Is it even possible? I tried these:</p> <pre class="lang-js prettyprint-override s-code-block"><code>document.getElementById('ttl').innerHTML = 'World'; ttl.innerHTML = 'world'; document.getElementsByTagName('title')[0].innerHTML = 'world'; document.querySelector.apply(document,['title']).innerHTML = 'world'; document.querySelectorAll.apply(document,['title'])[0].innerHTML = 'world'; </code></pre> <p>These all will change only the client side (i.e., browser title).</p></div> <div class="mt24 mb12"> <div class="post-taglist grid gs4 gsy fd-column"> <div class="grid ps-relative"> <a href="../../questions/tagged/javascript" class="post-tag js-gps-track" title="show questions tagged 'javascript'" rel="tag">javascript</a> <a href="../../questions/tagged/jquery" class="post-tag js-gps-track" title="show questions tagged 'jquery'" rel="tag">jquery</a> <a href="../../questions/tagged/html" class="post-tag js-gps-track" title="show questions tagged 'html'" rel="tag">html</a> <a href="../../questions/tagged/page-title" class="post-tag js-gps-track" title="show questions tagged 'page-title'" rel="tag">page-title</a> </div> </div> </div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="edited May 10 '16 at 14:09">edited May 10 '16 at 14:09</time> <a href="../../users/21960/ale" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/21960.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="ale" onerror="onImageLoadingError(this);" /> </a> <div class="s-user-card--info"> <a href="../../users/21960/ale" class="s-user-card--link">ale</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">6,267</li> <li class="s-award-bling s-award-bling__gold" title="6 gold badges">6</li> <li class="s-award-bling s-award-bling__silver" title="54 silver badges">54</li> <li class="s-award-bling s-award-bling__bronze" title="64 bronze badges">64</li> </ul> </div> </div> </div> <div class="post-signature owner grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Jun 27 '14 at 15:14">asked Jun 27 '14 at 15:14</time> <a href="../../users/1468484/sajanyamaha" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/1468484.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="sajanyamaha" onerror="onImageLoadingError(this);" /> </a> <div class="s-user-card--info"> <a href="../../users/1468484/sajanyamaha" class="s-user-card--link">sajanyamaha</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">2,958</li> <li class="s-award-bling s-award-bling__gold" title="2 gold badges">2</li> <li class="s-award-bling s-award-bling__silver" title="22 silver badges">22</li> <li class="s-award-bling s-award-bling__bronze" title="39 bronze badges">39</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-24455248" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="24455248" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-37844575" class="comment js-comment " data-comment-id="37844575" data-comment-owner-id="511529" data-comment-score="2"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> <span title="number of 'useful comment' votes received" class="warm">2</span> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment37844575_24455248"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Of course they change the browser title. What 'd you expect? The purpose of that title tag, is to show a title in the browser.</span> – <a href="../../users/511529/goleztrol" title="109,399 reputation" class="comment-user ">GolezTrol</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/24455248/set-html-title-tag-values-dynamically#comment37844575_24455248"><span title="2014-06-27T15:16:48.670 License: CC BY-SA 3.0" class="relativetime-clean">Jun 27 '14 at 15:16</span></a></span> </div> </div> </li> <li id="comment-37844643" class="comment js-comment " data-comment-id="37844643" data-comment-owner-id="1933563" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment37844643_24455248"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">possible duplicate of [How to dynamically change a web page's title?](http://stackoverflow.com/questions/413439/how-to-dynamically-change-a-web-pages-title)</span> – <a href="../../users/1933563/kolby" title="2,606 reputation" class="comment-user ">Kolby</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/24455248/set-html-title-tag-values-dynamically#comment37844643_24455248"><span title="2014-06-27T15:18:20.673 License: CC BY-SA 3.0" class="relativetime-clean">Jun 27 '14 at 15:18</span></a></span> </div> </div> </li> <li id="comment-37844676" class="comment js-comment " data-comment-id="37844676" data-comment-owner-id="511529" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment37844676_24455248"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">@isherwood "All these characters" are actually 5 different solutions for the same problem. So if you pick one, it's not that many anymore. And especially `ttl.innerHTML = 'world'` isn't that much longer than `$('#ttl').html('world')`. :p</span> – <a href="../../users/511529/goleztrol" title="109,399 reputation" class="comment-user ">GolezTrol</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/24455248/set-html-title-tag-values-dynamically#comment37844676_24455248"><span title="2014-06-27T15:18:49.617 License: CC BY-SA 3.0" class="relativetime-clean">Jun 27 '14 at 15:18</span></a></span> </div> </div> </li> <li id="comment-37844756" class="comment js-comment " data-comment-id="37844756" data-comment-owner-id="1264804" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment37844756_24455248"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">`$('#ttl').html('World')` beats `document.getElementById('ttl').innerHTML = 'World'`, no? Seems you truncated the statement a bit.</span> – <a href="../../users/1264804/isherwood" title="46,000 reputation" class="comment-user ">isherwood</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/24455248/set-html-title-tag-values-dynamically#comment37844756_24455248"><span title="2014-06-27T15:20:33.110 License: CC BY-SA 3.0" class="relativetime-clean">Jun 27 '14 at 15:20</span></a></span> </div> </div> </li> <li id="comment-37844784" class="comment js-comment " data-comment-id="37844784" data-comment-owner-id="1468484" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment37844784_24455248"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">@GolezTrol ever heard about SEO ?</span> – <a href="../../users/1468484/sajanyamaha" title="2,958 reputation" class="comment-user owner">sajanyamaha</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/24455248/set-html-title-tag-values-dynamically#comment37844784_24455248"><span title="2014-06-27T15:21:20.427 License: CC BY-SA 3.0" class="relativetime-clean">Jun 27 '14 at 15:21</span></a></span> </div> </div> </li> <li id="comment-37844843" class="comment js-comment " data-comment-id="37844843" data-comment-owner-id="2324107" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment37844843_24455248"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Robots doesn't have JavaScript activated if I am not mistaken.</span> – <a href="../../users/2324107/karl-andre-gagnon" title="32,531 reputation" class="comment-user ">Karl-André Gagnon</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/24455248/set-html-title-tag-values-dynamically#comment37844843_24455248"><span title="2014-06-27T15:22:54.997 License: CC BY-SA 3.0" class="relativetime-clean">Jun 27 '14 at 15:22</span></a></span> </div> </div> </li> <li id="comment-37844852" class="comment js-comment " data-comment-id="37844852" data-comment-owner-id="1468484" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment37844852_24455248"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">@GolezTrol tats my question mate,any other options u know, to make this dynamic ?</span> – <a href="../../users/1468484/sajanyamaha" title="2,958 reputation" class="comment-user owner">sajanyamaha</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/24455248/set-html-title-tag-values-dynamically#comment37844852_24455248"><span title="2014-06-27T15:23:04.040 License: CC BY-SA 3.0" class="relativetime-clean">Jun 27 '14 at 15:23</span></a></span> </div> </div> </li> <li id="comment-37844898" class="comment js-comment " data-comment-id="37844898" data-comment-owner-id="511529" data-comment-score="2"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> <span title="number of 'useful comment' votes received" class="warm">2</span> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment37844898_24455248"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Change the title server side.</span> – <a href="../../users/511529/goleztrol" title="109,399 reputation" class="comment-user ">GolezTrol</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/24455248/set-html-title-tag-values-dynamically#comment37844898_24455248"><span title="2014-06-27T15:24:18.733 License: CC BY-SA 3.0" class="relativetime-clean">Jun 27 '14 at 15:24</span></a></span> </div> </div> </li> <li id="comment-37844935" class="comment js-comment " data-comment-id="37844935" data-comment-owner-id="1468484" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment37844935_24455248"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">its plain HTML page,server side codes not applicable</span> – <a href="../../users/1468484/sajanyamaha" title="2,958 reputation" class="comment-user owner">sajanyamaha</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/24455248/set-html-title-tag-values-dynamically#comment37844935_24455248"><span title="2014-06-27T15:25:20.817 License: CC BY-SA 3.0" class="relativetime-clean">Jun 27 '14 at 15:25</span></a></span> </div> </div> </li> <li id="comment-37845047" class="comment js-comment " data-comment-id="37845047" data-comment-owner-id="1468484" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment37845047_24455248"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Downvoters , can i please have an reason,where am i wrong ?</span> – <a href="../../users/1468484/sajanyamaha" title="2,958 reputation" class="comment-user owner">sajanyamaha</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/24455248/set-html-title-tag-values-dynamically#comment37845047_24455248"><span title="2014-06-27T15:27:52.060 License: CC BY-SA 3.0" class="relativetime-clean">Jun 27 '14 at 15:27</span></a></span> </div> </div> </li> <li id="comment-37845079" class="comment js-comment " data-comment-id="37845079" data-comment-owner-id="3412322" data-comment-score="2"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> <span title="number of 'useful comment' votes received" class="warm">2</span> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment37845079_24455248"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">If your goal is to change the contents of the `<title>` tag but to leave the original, unmodified contents of the `<title>` tag visible to users, the answer is "That's not possible." If that's not your goal, can you please clarify what you mean by "I want to update NOT the browser title but the HTML tag itself"? – Daniel Beck Jun 27 '14 at 15:28

Answer 1

You can't change text within the tag without the browser detecting and refreshing it.

If you need to change a tag and that tag must be yes or yes at the , then add a second title tag.

If you utilize:

document.title='my new title';

Changes will only be made to your first tag.

Though I don't see any major benefit, that is the purpose of title tag, change the window title.

Also, when you want only to modify text, use .innerText rather than .innerHTML.

Answer 2

// Create reusable function with variable to hold text
function title(text) {
    return document.title = text
}

// Call function with string in parenthesis 
title("Hello World");