Change attribute value in DOM element using jquery or javascript

Why to use JQuery for simple tasks?

document.querySelector('text').setAttribute('x', '25');

Or, a bit more performant:

document.getElementsByTagName('text')[0].setAttribute('x', '25')

$('.more').attr('x', 'value you want');

For any standard HTML attribute, you can update the attribute using setAttribute.

But... if you want to manipulate custom attributes like x, you can use the HTML5 data-* attribute and javascript .dataset instead:

Eg.

To change

<text class="more" title="Using HTML5 data-* attributes" data-x="5">

to

<text class="more" title="Using HTML5 data-* attributes" data-x="8">

You can use the following javascript:

var moreText = document.getElementsByClassName('more')[0];
var x = parseInt(moreText.dataset.x);
var x = x + 3;
moreText.dataset.x = x;

The traditional approach (for non-data-* elements) is:

var moreText = document.getElementsByClassName('more')[0];
var newTitle = 'Using HTML5 custom data-* attributes';
moreText.setAttribute('title',newTitle);

Syntax: $(selector).attr(attribute,value);

Example :

$('.more').attr('x','Update New Value');  //Update value

$('.more').attr('x');  //Get attribute Value

$('.more').attr('x', '51'); // page load update value

$('#Newvalue').click(function() {
  var newValue = $('.more').attr('x'); // Get Value attr 'X'
  alert(newValue);
  console.log(newValue);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<text class="more" x=5>

  <input type="button" id="Newvalue" value="Get New Value" />

you can use this code

1.   $('.more').attr('x',15);

or

 2. $("text").attr('x',25)