html - 将字符串添加到 html 元素以进行 javascript 解析？

Question

我有一个使用 javascript 动态创建的菜单。

首先它寻找具有特定属性的部分元素，例如：

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

并将它们添加到菜单中。它还需要从每个元素中获取将出现在每个菜单项上的标题，例如：

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

我不需要任何关于 js 的帮助，我只想知道如何将数据添加到元素以及属性的名称。我该怎么做？

Answer 1

如果我们将 ID 设置为 section 会很容易

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

然后用setAttribute和操作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

参考： http ://html5doctor.com/html5-custom-data-attributes/

Answer 2

这是我为我的动态菜单项所做的（注意：我不知道你在服务器端使用什么语言。我使用 node.js 服务器端和jade 作为我的客户端模板）。

请注意，由于您没有提出足够精确的问题，因此我不确定您需要什么。你说你想添加数据，给我们一个你正在使用的数据的例子。

服务器端：

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});
});

客户端：

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