Append HTML to Node using jquery

Question

The HTML below displays the date and time within the same DATE class. This is no good, because I want to style them independently. But I can't as is, so I thought jquery could be injected to split it up.

<div class="container">
    <a class="title" href="http://www.example.com">Headlines Goes Here</a>
    <div class="date">Jan 29, 2013 12:05:00 PM EST</div>
    <div class="post">
        <p>Content Goes Here</p>
    </div>
</div>

I'm hoping with someone's help this could be solved with jquery by appending within the DATE class so the output would look like this:

<div class="container">
    <a class="title" href="http://www.example.com">Headlines Goes Here</a>
    <div class="date">Jan 29, 2013</div><div class="time">12:05:00 PM EST</div>
    <div class="post">
        <p>Content Goes Here</p>
    </div>
</div>

This is my JQUERY so far, which I styled as red so I could see a physcal change, can someone help solve this issue? my jquery is clearly not correct.

$(window).load(function(){
         if ($(".date:contains(', 2013')").length)
             this.parentNode.append(this).html("</div><div class=time style=color:red>");
});

This is my fiddle: http://jsfiddle.net/3ZWkQ/

this.parentNode.append(this).html("</div><div class=time style=color:red>"); This doesn't seem to be right... — jeroenvisser101
– jeroenvisser101, Commented Feb 12, 2013 at 18:58

Pablo Romeo · Accepted Answer · 2013-02-12 19:39:36Z

1

Ideally you would want to do this server-side, to avoid having to alter the actual document structure.

But if that is not possible, you can do it the following way:

$(function() {
  $(".date").after(function() {
    var val = $(this).text();
    var justDate = val.substring(0,12);
    $(this).text(justDate);
    var parsedTime = val.substring(12);
    return "<div class=time >" + parsedTime + "</div>";
  });
});

NOTE: Here I just used substring for the splitting, but that obviously won't be the correct implementation, you're better off parsing to a Date and formatting the parts using a jquery plugin, prototype, etc.

Here's the fiddle: http://jsfiddle.net/MS3W6/

edited Feb 12, 2013 at 19:39

answered Feb 12, 2013 at 19:15

Pablo Romeo

11.4k2 gold badges32 silver badges60 bronze badges

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

Comments

Praveen Kumar Purushothaman · Accepted Answer · 2013-02-12 19:04:08Z

0

Change this part:

this.parentNode.append(this).html("</div><div class=time style=color:red>")

To:

$(this.parentNode).append("<div class=time style=color:red></div>")

answered Feb 12, 2013 at 19:04

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

Collectives™ on Stack Overflow

Append HTML to Node using jquery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related