How do I give an ID to part of the contents of a tag?</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-07T00:38:43.237" class="fromnow">Jun 07 '14 at 00:38</time> </div> <div class="grid--cell ws-nowrap mr16 mb8"> <span class="fc-light mr2">Active</span> <time class="fromnow" title="2014-06-07T01:09:16.463" datetime="2014-06-07T01:09:16.463">Jun 07 '14 at 01:09</a> </div> <div class="grid--cell ws-nowrap mb8" title="Viewed 1,653 times"> <span class="fc-light mr2">Viewed</span> 1,653 times </div> </div> <div id="mainbar" role="main" aria-label="questions and answers"> <div id="question" class="question" data-questionid="24092519" data-ownerid="331393" 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="24092519"> <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 a title tag that looks something like this:</p> <pre><code><title>My Page Title - Photo #3</title> </code></pre> <p>I want to use JavaScript to change the numeric part of it, without having to hard code the "My Page Title - Photo #" string which is generated server side.</p> <p>I tried wrapping the number in a span so that I could change the contents of the span:</p> <pre><code><title>My Page Title - Photo #<span class="photoid">3</span></title> </code></pre> <p>But it seems HTML is not allowed in the <code>title</code> tag. I'd really like to pursue the class approach if possible as that would allow me to use a line of jquery such as this:</p> <pre><code>$('.photoid').html(new_photoid); </code></pre> <p>Did I mention that the photoid appears in several places on the page, which is why I want to be able to use this oneliner to change them all at the same time? For example:</p> <pre><code><p>A paragraph also containing the number <span class="photoid">3</span></p> </code></pre></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/html" class="post-tag js-gps-track" title="show questions tagged 'html'" rel="tag">html</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="user-info "> <div class="user-action-time">edited <span title="2014-06-07T00:56:11.660" class="relativetime">Jun 07 '14 at 00:56</span></div> <div class="user-gravatar32"></div> <div class="user-details" itemprop="author" itemscope="" itemtype="http://schema.org/Person"> <span class="d-none" itemprop="name">jl6</span> <div class="-flair"></div> </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 07 '14 at 00:38">asked Jun 07 '14 at 00:38</time> <a href="../../users/331393/jl6" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/331393.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="jl6" /> </a> <div class="s-user-card--info"> <a href="../../users/331393/jl6" class="s-user-card--link">jl6</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">6,110</li> <li class="s-award-bling s-award-bling__gold" title="7 gold badges">7</li> <li class="s-award-bling s-award-bling__silver" title="35 silver badges">35</li> <li class="s-award-bling s-award-bling__bronze" title="65 bronze badges">65</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-24092519" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="24092519" 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-37159553" class="comment js-comment " data-comment-id="37159553" data-comment-owner-id="482489" 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="comment37159553_24092519"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">So, you have the number in the title and also other elements that have that number in them (i.e. you don't have `<title>` tags in your `` do you?)? – JustcallmeDrago Jun 07 '14 at 00:54

  • @JustcallmeDrago: Correct, clarified with an example. – jl6 Jun 07 '14 at 00:56
  • Wait, are you asking about the `` or about `<p>` elements? If you just want regular elements in the `</p>`, then what's wrong with your code? Did you even try it? – cookie monster Jun 07 '14 at 00:57
  • 5 Answers5

    0

    A title can only have text, so you need to parse it out.

    document.title = document.title.replace(/\d+$/, "new value");
    
    cookie monster
    • 10,671
    • 4
    • 31
    • 45
    0

    title can't be set like that, it's not a child of .html

    some thing like

    var num = 3;
    document.title = "foo "+num
    

    to set the title, then reuse num for these photoids.

    JakePearse
    • 23
    • 4
    0

    Use the jQuery onDocumentReady syntax:

    $(function () {
        var elements = $('.contains_photoid');
        elements.html(elements.html().replace("3", "4"));
    
        $(document).attr('title', $(document).attr('title').replace("3", "4"));
    });
    

    You can't see the title change in this example, but that is the syntax. See Changing the page title with Jquery

    The "3" and "4" can be changed to anything, so you can create the page with a unique character string in place of the real ID in order to easily replace it if it appears in text with numbers already in it.

    http://jsfiddle.net/ZmXj5/1/

    Community
    • 1
    • 1
    JustcallmeDrago
    • 1,885
    • 1
    • 13
    • 23
    0

    Javascript

    var photoID = 355; //this assumes you have some code where you set this photoID value
    var title = document.title;
    title = title.substr(0,title.lastIndexOf('#')+1);
    document.title = title+photoID;
    

    See this fiddle for proof: http://jsfiddle.net/xrkhA/
    (I used a div content because you can't use title in jsfiddle)

    myfunkyside
    • 3,890
    • 1
    • 17
    • 32
    0

    You can either use, but $('title') will fail in IE8

    document.title="new title";
    

    or

    $('title').html('new title');  
    

    or

    $(document).attr('title','new title');  
    
    A l w a y s S u n n y
    • 36,497
    • 8
    • 60
    • 103