Forums

jcoder

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:

<li data-name="Will Robinson" data-gender="Male">Will Robinson</li>

CodePen:

http://codepen.io/jbatzel1/pen/icDEm

ToxicFire

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

<li>name: Will Robinson gender: male </li>

tammelin

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

ToxicFire

$("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.

treehouse : what would you like to learn today?

Forums

How to insert a attribute name in HTML (jQuery)