Grow your CSS skills. Land your dream job.

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.

    EX:

  • Will Robinson
  • CodePen:

    [http://codepen.io/jbatzel1/pen/icDEm](http://codepen.io/jbatzel1/pen/icDEm “”)

# November 30, 2012 at 12:05 pm

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 http://codepen.io/anon/pen/LCjqv ?

    Update: here is another alternative more similar to the example in your codepen http://codepen.io/anon/pen/kzuvo

    # November 30, 2012 at 12:53 pm

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

    based off this http://stackoverflow.com/questions/208016/how-to-list-the-properties-of-a-javascript-object

    @tammelin http://api.jquery.com/data/#data-html5 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.

    *May or may not contain any actual "CSS" or "Tricks".