1

I need to put the word "hello" in the span that contains the attribute "data-whatever", ie for this span:

<span data-whatever="nomatterwhat"> </ span>

I need to do this:

$ ("span[data-whatever]").html("hello");

Note that this above is with JQuery, but I need to know how to do the same with pure javascript.

Roberto Sepúlveda
  • 415
  • 4
  • 14
  • Use DOM API. https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector – Sayan Pal Sep 03 '17 at 05:14
  • Try googling for "css attribute selector". –  Sep 03 '17 at 05:16
  • I'm not agree with @torazaburo, that question you're linking is not a duplicate of this one. That's css, if you know what's the relation between that answers and what I need here, then good for you, but I have no Idea on how to resolve my question with that post you're linking. – Roberto Sepúlveda Sep 03 '17 at 05:42
  • Hi Roberto. So first of all you did not read the manual about CSS selectors, or about finding elements using CSS selectors using JavaScript. By "manual", I mean any of a hundred documentation pages, tutorials, introductions, or Google results pages. Now you have failed to read the answers to the question this one was marked as a duplicate of, in particular the second answer, which clearly states "Note this can also be used in a JQuery selector, or using `document.querySelector`". You'd find your progress as a programmer would go much faster if you slowed down and read and digested things. –  Sep 03 '17 at 05:55
  • Ok, I understand, it's just that the probability to find that answer on a question that has no relation to mine, could be difficult... Or very difficult when the "Questions that may already have your answer", which was displayed when I was making the ask, doesn't show the post you're linking. – Roberto Sepúlveda Sep 03 '17 at 06:08
  • *A question that has no relation to mine* On the contrary, it has a very strong relationship to yours to the point of being virtually identical. Both questions are precisely about how to select elements with attributes. –  Sep 03 '17 at 15:47

2 Answers2

1

You can use querySelector

document.querySelector('span[data-whatever]').innerHTML = "You text";

adiga
  • 34,372
  • 9
  • 61
  • 83
  • This won't work at all. –  Sep 03 '17 at 05:28
  • it works on my case, ty so much – Roberto Sepúlveda Sep 03 '17 at 05:35
  • @torazaburo OP has accepted it. Can you tell what's wrong with this answer, so that I can improve it. Should i loop through whatever `querySelectorAll` returns and set the innerHTML or use `querySelector`? – adiga Sep 03 '17 at 05:36
  • What's wrong with it is that it doesn't work. `querySelectorAll` returns a `NodeList`, which has no `innerHTML` property. It means absolutely nothing that the OP accepted, other than that he didn't actually try it. Whether you loop or use `querySelector` depends on the OP's intent--whether he wants to do this for all such elements, or expects to have just one. –  Sep 03 '17 at 05:56
-1

Try this:

var el = document.querySelectorAll('span');
el.forEach(function(item){
  if(item.hasAttribute('data-whatever')){
    item.innerHTML = 'Hello';
  }
})
adda82
  • 165
  • 1
  • 4
  • I updated the code to fix it. – adda82 Sep 03 '17 at 05:23
  • This is unlikely to work in all browsers, since the result of `querySelectorAll` is a `NodeList` which may not have a `forEach` method. In any case, why not just use an attribute selector to start with? –  Sep 03 '17 at 05:29