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

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

• javascript
• php
• jquery
• html

• Please be more specific about what you want to acplish, question is quite vague – charlietfl Commented Jan 12, 2016 at 5:36
• Look at this post: stackoverflow./questions/2487747/… – Thomas Mundal Commented Jan 12, 2016 at 5:37
• you can get it like $("li[data-id=528]") . – Parth Trivedi Commented Jan 12, 2016 at 5:39

4 Answers 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');
});

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

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

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>');