Add string to html element for javascript parsing?

Question

I have a menu that is created dynamically with javascript.

First it looks for for section elements with a certain attribute eg:

<section something="add"></section>

And adds them to the menu. It also needs to get the title that will appear on each menu item from each element, eg:

<section something="add" something2="Services"></section>

I don't need any help with the js I just want to know how to add the data to the elements and what names give to the attributes. How should I do it?

It would have helped if you showed how you were creating the element! — epascarello, Sep 13 '13 at 12:35
Use [data attributes](http://html5doctor.com/html5-custom-data-attributes/) in your markup. — Bergi, Sep 13 '13 at 12:36
I only need to know how to do it in the html, I already know how to select them with jquery. — lisovaccaro, Sep 13 '13 at 12:37
First try to understand your problem and possibilities of resolving it.. — Sasidharan, Sep 13 '13 at 12:39

xkeshav · Accepted Answer · 2013-09-13T12:53:30.010

0

it would be easy if we set an ID to section

<section id="sectionUniqueID" data-example="add"></section>

Then manipulate with setAttribute and getAttribute .

// 'Getting' data-attributes using getAttribute
var section = document.getElementById('sectionUniqueID');
var example = section.getAttribute('data-example'); 
alert(example);
// 'Setting' data-attributes using setAttribute
section.setAttribute('data-example2', 'substract');
var example2 = section.getAttribute('data-example2');
alert(example2);

Working Demo

Reference: http://html5doctor.com/html5-custom-data-attributes/

edited Sep 13 '13 at 12:53

answered Sep 13 '13 at 12:35

xkeshav

53,360
44
177
245

I'm afraid you misunderstood the question. See the other answer comments. – John Dvorak Sep 13 '13 at 12:43
Update the answer after changing the question . see now – xkeshav Sep 13 '13 at 12:55

score 0 · Answer 2 · answered Sep 13 '13 at 13:07

Here's what I am doing for my dynamic menu items (note: i have no idea what language you're using server side. I use node.js server side and jade for my client side templating).

Note that because you have not asked a precise enough question, I am not exactly sure what you need. You say you want to add data, give us an example of the data you are working with.

Server side:

var user_id = req.session.user.user_id;
// mysql statement to retrieve menu items
mysql.query('select * from menu where user_id = ?',[user_id], function(e, r) {
  var menu;
  // r would be array of objects:
  // [{menu_name: "one", link: "http://foobar.com"},{menu_name:"two",
  // link:"http:otherlink.com"}];
  if (r.length > 0) menu = r;
  else menu = [];
  res.render('menu', {menu: menu});
});

Client side:

html
  body
    section#submenu.navbar
      ul#menu
        - if (menu.length > 0)
           - for (var i = 0; i < menu.length; i++) 
              li
                a(href=#{menu[i].link})= menu[i].menu_name

Add string to html element for javascript parsing?

2 Answers2