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

Question

我必须动态创建一个 Anchor 标记，并在其中添加 Foundation 方面。 Foundation 使用的元素之一称为“数据工具提示”。

如果我尝试创建以下行，如何创建“数据工具提示”元素？

我的预期

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

我如何生成元素

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

我已经在 J​​Query 中看到了执行此操作的方法，但是由于“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>

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

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

---

创建节点/元素后，您必须将其附加到 DOM。

另外，我认为当您处理布尔值时，您实际上不包含引号（true 而不是“true”，因为引号中的任何内容都是字符串类型，而布尔类型不是字符串）。

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

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

// 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' */

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

<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>