Duplicate an element?

Question

I'm trying to duplicate an element in a page. I do not exactly how, is it possible with CSS or I need to use a script?

I imagine something like this:

  #yan:before { 
    content: Get The Value Of(AN.element.inPage) !important;
    font-size: 200% !important;
    }

E.G.: Let's say I want to get the title of a topic.

  #yan:before { 
    content: Get The Value Of(h1.subject) !important;
    font-size: 200% !important;
    }

Then the topic title would appear 2 times in the page. Is it possible?

NOW This is my RIGHT code...

// ==UserScript==
// @name        DUPLICATING - CLONE elements
// @namespace   http://userscripts.org/scripts/show/109262
// @description    EXPLAIN ME PLEASE
// @include     http*://*answers.yahoo.com*
// @version     1
// ==/UserScript==


var yan = document.getElementById('yan'),
h1s = document.querySelectorAll('h1.subject');

[].forEach.call(h1s, function(node) {
// insert before
yan.parentNode.insertBefore(node.cloneNode(true), yan);
});

►►►► BUT now how do I set a position relative to the "#yan-related" element?? ►►►► I want the newly created element to follow the #yan-related.

Ja͢ck · Answer 1 · 2013-05-02T04:27:46.810

5

This is only possible with script, e.g.

var yan = document.getElementById('yan'),
h1s = document.querySelectorAll('h1.subject');

[].forEach.call(h1s, function(node) {
    // insert before
    yan.parentNode.insertBefore(node.cloneNode(true), yan);
});

Demo

edited May 02 '13 at 04:27

answered May 02 '13 at 04:22

Ja͢ck

170,779
38
263
309

@user742625 I don't know what `#yan-related` is. – Ja͢ck May 02 '13 at 04:52

Akshar Raaj · Answer 2 · 2013-05-02T04:17:59.493

3

You will have to use jquery. Check clone()

var a = $("#dashnav").clone
$("#dashnav").after(a)

edited May 02 '13 at 04:17

answered May 02 '13 at 04:11

Akshar Raaj

14,231
7
51
45

I'm new in this, could you write an example and tell me where can I insert it? in wich file, I use GreaseMonkey and Stylish. – Sam-Bo May 02 '13 at 04:15
Suppose you have an element and you want to duplicate and insert it after the first element. Edited the answer for it. – Akshar Raaj May 02 '13 at 04:18

score 0 · Answer 3 · edited May 23 '17 at 11:49

0

No, CSS is for layout purposes, and cannot clone HTML elements. You will have to use JavaScript/jQuery for this purpose.

See related question on how to use .clone():

Is it possible to clone html element objects in JavaScript / JQuery?

edited May 23 '17 at 11:49

Community

1
1

answered May 02 '13 at 04:15

Samuel Liew

76,741
107
159
260

1

All things considered, this should be a comment. – Ja͢ck May 02 '13 at 04:18

Duplicate an element?

3 Answers3