How to append text to data-attribute using Jquery

Question

I have modal window and data attribute on it.

<a href="#"  data-toggle="modal" data-target="#modal-request-confirmation" id="modalWindow" value="Send"
                       class="btn btn-default" data-form="requestPto" data-html="true"
                       **data-additionalinfo="Are you sure you want to submit the request <br /> from"** >
                    Request
                    </a>|

and this is my jQuery function

$('#modalWindow').on('click',function (){
        var startDate = new Date($("#StartDate").val());
        var endDate = new Date($("#EndDate").val());
        var a = $(this).data('additionalinfo');
    });

I know i can set this element value like this:

$(this).data('additionalinfo', 'my appended text/value/etc');

My question is: how to append text to this attribute value so i will have:

"Are you sure you want to submit the request
from" + myAppendedText.

I tried with a.val().append() and a.val().join() but it did not work. I also checked and tried something like this how to append text to an attribute like Value but it did not work too. Any help ?

Answer 1

There is no append methods for the data attributes, but you can use like this

var oldData = $(this).data('additionalinfo');
$(this).data('additionalinfo', oldData + " new Text");

Answer 2

You are almost there!

Just you cached it now take a new var and set it again like:

$('#modalWindow').on('click',function (){
        var startDate = new Date($("#StartDate").val());
        var endDate = new Date($("#EndDate").val());
        var a = $(this).data('additionalinfo'); // cache it here
        var newA = a + " new Text to put." // add those two
        $(this).data('additionalinfo', newA); // now set it again.
    });