The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

How to insert a attribute name in HTML (jQuery)

  • # November 30, 2012 at 11:02 am

    Hi All,

    I need to be able to insert the data attribute name in HTML. I want to pull the data-name out from the example below and insert it in HTML. If there is a way to get rid of data-, that would be great too.


  • Will Robinson
  • CodePen:

    []( “”)

# November 30, 2012 at 12:05 pm

This reply has been reported for inappropriate content.

not 100% clear on what exactly you want, im interpreting it as you want to basically get all of the attributes in the li element and insert both the value of the attribute and the name of the attribute into the body of the element.
ie your example above becomes

  • name: Will Robinson gender: male
  • # November 30, 2012 at 12:37 pm

    How about something like this ?

    Update: here is another alternative more similar to the example in your codepen

    # November 30, 2012 at 12:53 pm

    This reply has been reported for inappropriate content.

    $("li").each(function() {<br />

    $this = $(this);
    var data = $;
    for(var key in data){
    $this.text(key + “:” + data[key] + “, ” + $this.text());

    based off this

    @tammelin if he’s using data attributes.

    Viewing 4 posts - 1 through 4 (of 4 total)

    You must be logged in to reply to this topic.

    There's a whole bunch of content on CSS-Tricks.

    Search for Stuff   •   Browse the Archives

    Get the Newsletter ... or get the RSS feed