通过 Jquery 向 HTML 元素添加属性

Question

I am using wordpress and there is no way to add custom attribute to HTML element via theme. I found that it can be done via Jquery, but it doesn't help me.

Attributes that I want to add to HTML element on load (No need to click anything specific):

data-tf-popup="Vxs1VOeK" 
data-tf-hide-headers="" 
data-tf-transitive-search-params="utm_source, utm_medium,utm_campaign,utm_term,utm_content" 
data-tf-iframe-props="title=Dermatologo konsultacija internetu - iDerma" 
data-tf-medium="snippet" 
data-tf-hidden="utm_source=xxxxx,utm_medium=xxxxx,utm_campaign=xxxxx,utm_term=xxxxx,utm_content=xxxxx" 

Specific button/item to which I want to add it. Currently it has Ahref, but I will remove the ahref, to keep it empty.

<li id="menu-item-37" class="menu-singup menu-item menu-item-type-custom menu-item-object-custom menu-item-37" data-tf-popup="Vxs1VOeK"><a href="https://form.typeform.com/to/Vxs1VOeK">Pradėti konsultaciją</a></li>

Any help will be appreciated!

Answer 1

You can add the attributes via jQuery's .attr() function . The first parameter determines the attribute you're adding while the second parameter is the value of the said attribute.

Example:

$(document).ready(() => {
  $('#element_id').attr('data-tf-popup', 'Vxs1VOeK');
  $('#element_id').attr('data-tf-hide-header', '');
  // ...
});

You can make it cleaner by using JSON objects as such:

$(document).ready(() => {
  const attr = {
    'data-tf-popup': 'Vxs1VOeK',
    'data-tf-hide-header': '',
    'data-tf-transitive-search-params': 'utm_source, utm_medium,utm_campaign,utm_term,utm_content',
    // ...
  }
  
  for (let key in attr) {
    $('#element_id').attr(key, attr[key]);
  }
});