Question

I'm making a code generator that will give you the code for a text snippet. There's a customization panel where you format the text. When you generate the code it prints it based on what you entered in the panel. If you want multiple formats on the same line, you'll need two or more customization panels, which is achievable using the "Add Panel" button.

But here's the problem: when I clone in the panel, no matter what I try, I can't specify a target to clone in the data. It always does it at the bottom.

Here's a snippet of the code I used:

<!--What gets cloned!-->
<div id="duplicate">
    <input type="radio"/>
</div>
<!--What triggers the cloning function!-->
<input type="button" value="Clone Radio Button" onclick="dup()"/>
<!--This is the id that I want to paste the data to!-->
<p id="paste"></p>
<!--This is just text to prove that it appears at the bottom!-->
<h1>The radio button will clone below me!</h1>
<script>
    //This will take the id of the div tag, look at its data, and copy that data to the
    //bottom of the page
    function dup() {
        var clone = document.getElementById("duplicate"),
        clone2 = clone.cloneNode(true);
        document.body.appendChild(clone2)
    }
</script>

As you can see, all this does is takes the div tag's data and clones it somewhere else, just like the "Add Panel" button. It just isn't 100% working.

If you know the answer to my question, could you please write out my function with the correct tag? That would be awesome. As you might be able to see, I want it to be pasted at the p tag, where it says id="paste".

I hope someone knows the answer. It's a simple concept, pasting a div tag's data at a desired location, but for me, it's important. Thank you!

EDIT : THANKS TO MANY PEOPLE, I FOUND THAT I WAS CLONING "IN THE FUNCTION", SO I HAD TO DIRECT IT WHEN I APPENDED THE CHILD WITH DOCUMENT.GETELEMENTBYID :)

Was it helpful?

Solution

Instead of appending copied text to body tag, you can specify your div id.

document.getElementById("paste").appendChild(clone2);

OTHER TIPS

You're currently appending the cloned node to the body of the document;

document.body.appendChild(clone2)

If you want to append it to an element with ID paste, you simply change that line to;

document.getElementById('paste').appendChild(clone2)
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top