Question

我必须动态创建一个我正在添加Foundation方面的Anchor标记。其中一个元素称为Foundation使用的“data-tooltip”。

如果我正在尝试创建以下行，如何创建“data-tooltip”元素？

我所看到的

<a data-tooltip aria-haspopup="true">FOO</a>

我如何生成元素

var artworkColumn = document.createElement("a");
artworkColumn.setAttribute("aria-haspopup", "true");

我在JQuery中看到过这样做的方法，但由于“a”元素不存在，我不能使用StackOverflow中描述的方法。

由于史蒂夫

Answer 1

执行与aria-haspopup完全相同的操作，但将值设置为空字符串：

artworkColumn.setAttribute("data-tooltip", '');

示例：http://codepen.io/anon/pen/ZQVdQL

我认为可能会让你失望的是检查元素不会显示你期望的结果，但是如果你将元素打印到控制台，你会发现它确实具有你期望的属性

Answer 2

如果您希望以下方式将以下元素完全和现有作为DOM中的元素：

<a data-tooltip aria-haspopup="true">FOO</a>

＆＃13;

    var artworkColumn = document.createElement("a");
    artworkColumn.setAttribute("aria-haspopup", "true");
    artworkColumn.setAttribute("data-tooltip", "");
    artworkColumn.innerHTML = "FOO";
    document.body.appendChild(artworkColumn);

＆＃13;

如果您正在寻找功能性结果，请参阅此答案的以下部分：

<小时/> 创建节点/元素后，必须将其附加到DOM。

另外，我认为当你处理一个布尔值时，你实际上并没有包含引号（true而不是＆＃34; true＆＃34;，因为引号中的任何内容都是String类型和布尔值type不是String）。

您可以使用setAttribute()创建或dataset设置data-*属性，请记住在使用dataset调用时更改名称（例如data-tooltip使用tooltip在您的JS代码中dataset。）我建议使用setAttribute()

这里是article that'll set you straight on the data-*

＆＃13;

// Using setAttribute()
var artworkColumn = document.createElement("a");
artworkColumn.setAttribute("aria-haspopup", true);
artworkColumn.setAttribute("data-tooltip", "");
artworkColumn.setAttribute("href", "http://cdn.playbuzz.com/cdn/b19cddd2-1b79-4679-b6d3-1bf8d7235b89/93794aec-3f17-47a4-8801-a2716a9c4598_560_420.jpg");
artworkColumn.innerHTML = "Starry Night, Vincent Van Gogh";
document.body.appendChild(artworkColumn);

// Using dataset
var art = document.getElementById('artwork1');
var tip = art.dataset.tooltip;
console.log('tip: '+tip);

// Use DevTools in the browser to test both methods.  
// To see the anchor object, artworkColumn: 

   /* F12 then find the Element tab to see the new link,
      there's also an empty "Link" under the image. */

// To test to see if the data-tooltip was created:

   /* F12 then find the Console tab,
      you'll see the log: 'tip: circa. 1889' */

＆＃13;

a { color: red; text-decoration: none; font-size: 42px;}
a:hover {color: blue; text-decoration: underline; cursor: pointer; }
a:before { content: 'Link: ';}

＆＃13;

<figure id="artwork1" data-tooltip="circa. 1889">
  <img src="http://cdn.playbuzz.com/cdn/b19cddd2-1b79-4679-b6d3-1bf8d7235b89/93794aec-3f17-47a4-8801-a2716a9c4598_560_420.jpg" alt=""/>
  </figure>

＆＃13;

如何在动态创建的元素上设置单个属性

2 个答案: