How to change the innerHtml content using 'data-id' attribute using jquery?

Question

<li data-id="528">
  <a title="LOGIN" class="dropdown-toggle" href="#">
          <i class="glyphicon glyphicon-user"></i>LOGIN</a>
  <div style="width: 350px;" data-width="350" data-class="menu-login-row">My other content</div>
</li>

I Have this html I want to change the content by data-id like given below

<li data-id="528">
  <a title="LOGOUT" href="/logout">
          <i class="glyphicon glyphicon-user"></i>LOGOUT</a>
  <div style="width: 350px;" data-width="350" data-class="menu-login-row">My other content</div>
</li>

Is this possible if, Please advice me

Thank you.

Please be more specific about what you want to accomplish, question is quite vague — charlietfl, Jan 12 '16 at 05:36
Look at this post: http://stackoverflow.com/questions/2487747/selecting-element-by-data-attribute — Thomas Mundal, Jan 12 '16 at 05:37

score 4 · Accepted Answer · answered Jan 12 '16 at 05:39

4

Yes it's possible.

Like this

var a=$('li[data-id="528"]').find('a');
a.attr('href','/logout');
a.contents().filter(function() {
    return this.nodeType == 3
}).each(function(){
    this.textContent = this.textContent.replace('LOGIN','LOGOUT');
});

answered Jan 12 '16 at 05:39

Anik Islam Abhi

25,137
8
58
80

Sing · Answer 2 · 2016-01-12T05:59:22.677

4

You can get the element by attribute selector, and use .html() to modify content:

$('[data-id="528"]').html('<a title="LOGOUT" href="/logout"><i class="glyphicon glyphicon-user"></i>LOGOUT</a><div style="width: 350px;" data-width="350" data-class="menu-login-row">My other content</div>')

Actually you can modify innerHtml of an jquery element by .html()

$(selector).html(whatEverYouWant);

edited Jan 12 '16 at 05:59

answered Jan 12 '16 at 05:42

Sing

3,942
3
29
40

you can't do this..because it will remove `` also and structure will be `

Dhara

Jan 12 '16 at 05:47

@debin please note that the OP question is How to change the "innerHtml content", not mention about what you are saying, plus, you only need to wrap what you want in .html() is the same. – Sing Jan 12 '16 at 05:51

He wants to change innerHTML like `

LOGOUT`

– Dhara Jan 12 '16 at 05:53

score 0 · Answer 3 · answered Jan 12 '16 at 06:05

Try it.

var htmlData = '<a title="LOGOUT" href="/logout">';
    htmlData+= '<i class="glyphicon glyphicon-user"></i>LOGOUT</a>';
    htmlData+='<div style="width: 350px;" data-width="350" data-class="menu-login-row">My other content</div>';  


jQuery('li[data-id="528"]').html(htmlData);

score 0 · Answer 4 · answered Jan 12 '16 at 06:26

0

You can write just one line code for this

$('li[data-id="528"]').find('a').attr("title","LOGOUT").attr("href","/logout").html('<i class="glyphicon glyphicon-user"></i>LOGOUT</a>');

answered Jan 12 '16 at 06:26

Harsh

476
1
4
10

How to change the innerHtml content using 'data-id' attribute using jquery?

4 Answers4