How To Set Single Attribute On Dynamically Created Element

I have to dynamically create an Anchor tag that I am adding a Foundation aspect to. One of the elements is called 'data-tooltip' that Foundation uses. If I'm trying to create the

Solution 1:

Just do the exact same thing you did for aria-haspopup, but set the value to an empty string:

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

Example: http://codepen.io/anon/pen/ZQVdQL

I think the thing that might be throwing you off is that inspecting the element will not show you the result you expect, but if you print out the element to the console you will see that it does in fact have the properties you expect.

Solution 2:

If you want the following element this way exactly and existing on your page as an element in the DOM:

<adata-tooltiparia-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);

If your'e looking for functional results refer to the following portion of this answer:

---

After creating a node/element you must append it to DOM.

Also, I think when you are dealing with a boolean value, you actually don't include the quotes (true instead of "true", because anything in quotes is a String type and a Boolean type is not a String).

You can use setAttribute() to create or dataset to set a data-* attribute, remember to change the name when invoking it with dataset (ex. data-tooltip would be tooltip in your JS code, using dataset.) I recommend using setAttribute()

Here's an 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 datasetvar 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: ';}

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