CODEWITHSUNDEEP
javascriptjqueryclone
Gregory Schultz
Gregory Schultz

Reputation: 844

How to clone data values from one div to another?

I have a div that has a lot of data values in it:

<div class="loaddata absolute" data-rel="https://media.acast.com/dtns/zflipsandzfolds-dtns4092/media.mp3" 
data-ep="episode 4" data-title="Z Flips and Z Folds"></div>

How do I clone data from data-ep and data-title to another div called mobile-title-list?

Upvotes: 1

Views: 369

Answers (1)

People
People

Reputation: 51

If I am understanding your question correctly, you want to copy the data residing in data-ep and data-title into another div called mobile-title-list (so that it contains the exact same previously mentioned attributes and there corresponding values). There a couple of ways to achieve this (and it depends on what is supported on your page--meaning what CDNs you are including). The easiest way is to use JQuery (which you would have to link its CDN in your code in the <head></head> section). To do it in JQuery, you first need a selector of some sorts: typically either an id (which is symbolized with a '#' symbol) or a class (which is symbolized with a '.' symbol). If you are wanting to only copy the data-ep and data-title attributes to solely the mobile-title-list, then you should use an id selector (because id's should be implemented as a unique identifier within your code); however, if you are planning on copying those attributes to other elements other than mobile-title-list, then you should use a class (because those are supposed to be implemented in your code in a way that allows for re-usability of that class anywhere you want). For all intents and purposes, I will assume you want to only copy those attributes to that one element and, therefore, I would suggest making mobile-title-list the div's id, like so:

<div id="mobile-title-list"></div>

Moreover, you will need to add an id to your div that you included in your question (that contains those two attributes you are trying to copy), like so:

<div id="target" class="loaddata absolute" data-rel="https://media.acast.com/dtns/zflipsandzfolds-dtns4092/media.mp3" 
data-ep="episode 4" data-title="Z Flips and Z Folds"></div>

Since I don't have a lot of context about what your code is supposed to do, I generically identified the div with an id of "target", but I would suggest making it more relevant of a name in your actual source code. Anyways, once you have ids in place in both the divs that you want to work with, then you can use JQuery to select the two target values from the first div and "inject" them, so to speak, into the other, like so:

// Select the data-ep and data-title info from the target div:
const data_ep_value = $('#target').attr('data-ep');
const data_title_value = $('#target').attr('data-title');

// Now add those attributes to mobile-title-list:
$('#mobile-title-list').attr('data-ep', data_ep_value);
$('#mobile-title-list').attr('data-title', data_title_value);

And finally for all the code together in a nice basic html page with JQuery:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <link rel="stylesheet" type="text/css" crossorigin="anonymous" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" crossorigin="anonymous"></script>
</head>
<body>
<div id="mobile-title-list"></div>
<div id="target" class="loaddata absolute" data-rel="https://media.acast.com/dtns/zflipsandzfolds-dtns4092/media.mp3" 
data-ep="episode 4" data-title="Z Flips and Z Folds"></div>

<script type="text/Javascript">
    // Select the data-ep and data-title info from the target div:
    const data_ep_value = $('#target').attr('data-ep');
    const data_title_value = $('#target').attr('data-title');

    // Now add those attributes to mobile-title-list:
    $('#mobile-title-list').attr('data-ep', data_ep_value);
    $('#mobile-title-list').attr('data-title', data_title_value);
</script>
</body>
</html>

If you would like to do it the "raw" JS way, then use this javascript instead of the previously mentioned JQuery:

// Select the data-ep and data-title info from the target div:
const data_ep_value = document.getElementById('target').getAttribute('data-ep');
const data_title_value = document.getElementById('target').getAttribute('data-title');

// Now add those attributes to mobile-title-list:
document.getElementById('mobile-title-list').setAttribute('data-ep', data_ep_value);
document.getElementById('mobile-title-list').setAttribute('data-title', data_title_value);

However, if you already have the data-ep and data-title values loaded into variables from previous use then you wouldn't select them from 'target' like I did, instead just simply add the attributes with those values to mobile-title-list.

Upvotes: 1

Related Questions