How to add one tags attribute in another tag using javascript or jquery?

Question

I want to know that, is it possible to bypass one tags data-attribute into another tag using javascript or jquery ?

For example, if I write this tag  in anywhere inside body, the data-attribute tag will be append automatically in body tag <body data-attribute="my-code"></body>

When I create a template, the <body> tag is without any attribute. I want that, when I'll write this tag with attribute (), only the attribute will be add in body tag (<body>).

If somebody know, please help me.

What did the OP try? How would the OP start solving the just described scenario? — Peter Seliger
– Peter Seliger, Commented Dec 21, 2022 at 18:56
Look, If i write this code in my template, then these data-xxxx attributes will add inside <body> tag.. I hope you understand.. — Asma Binta Younus
– Asma Binta Younus, Commented Dec 21, 2022 at 19:03
OP stands for original post or original poster, hence you in the context of this thread. — Peter Seliger
– Peter Seliger, Commented Dec 21, 2022 at 21:46

Peter Seliger · Accepted Answer · 2022-12-21 21:44:04Z

1

The OP should have a look into ...

Object.assign,
an HTMLElement's dataset property
and into e.g. querySelector from the selector API.

The Object.assign based approach used by the beneath provided example code merges the dataset object of the second provided source-element ... document.querySelector('#mycode') ... into the dataset object of the first provided target-element ... document.body. Which means that every property of the former gets assigned as property to the latter thus also overwriting equally named already existing properties.

Notes

?. is the Optional Chaining Operator, which allows chained property access in a fail safe way (in case properties do not exist).
?? is the Nullish Coalescing Operator which here gets used for falling back to a default value in case the left hand side value is either null or undefined.

console.log('before ...', { body: document.body });

Object
  .assign(
    document.body.dataset,
    document.querySelector('#mycode')?.dataset ?? {}
  );

console.log('after ...', { body: document.body });

#mycode code { background-color: #ddd; font-weight: bolder; }

<span
  id="mycode"
  data-attribute="code-one"
  data-message="Well Done Dear"
  data-number="5"
  data-status="Active"
>
  span with a lot of
  <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*">
    <code>data-*</code>
    global attributes
  </a>
</span>

edited Dec 21, 2022 at 21:44

answered Dec 21, 2022 at 19:12

Peter Seliger

13.5k3 gold badges31 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Asma Binta Younus Over a year ago

Will this data-xxxx apply if i write .... Otherwise this code Won't apply... Am I right ?

Peter Seliger Over a year ago

@AsmaBintaYounus ... the code is straightforward it assigns any data-* related value of a source element's (here: document.querySelector('#mycode')) dataset to the target element (here: document.body). Thus, immediately after the assignment the body element will feature all these data-* related attributes as well. Didn't the OP run/execute the above provided example code? The before/after logging proves what was just said.

Asma Binta Younus Over a year ago

Awesome brother, Just awesome... You actually did what I was thinking and looking for. Thank You

Barmar · Accepted Answer · 2022-12-21 18:56:54Z

0

You can access data-XXX attributes using the dataset property. Then simply assign from one element to another.

document.body.dataset.attribute = document.getElementById("mycode").dataset.attribute;

answered Dec 21, 2022 at 18:56

Barmar

789k57 gold badges554 silver badges669 bronze badges

6 Comments

Asma Binta Younus Over a year ago

how can I do it...?

Barmar Over a year ago

You just put that in your JavaScript code. If you're adding the mycode span dynamically, just add that after the code that adds it.

Asma Binta Younus Over a year ago

Look, If i write this code in my template, then these data-xxxx attributes will add inside <body> tag.. I hope you understand..

Barmar Over a year ago

It won't happen automatically, you need to write code like I showed to do it.

Barmar Over a year ago

If you need to copy all the data-XXX attributes, see stackoverflow.com/questions/14046481/… for how to loop through them.

|

Collectives™ on Stack Overflow

How to add one tags attribute in another tag using javascript or jquery?

2 Answers 2

3 Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related