Solved

How can I copy an element by looping thru it's attributes?

Posted on 2006-07-20
2
1,440 Views
Last Modified: 2013-11-19
How can I copy an element by looping thru the element's attributes and then using createElement() to apply those attributes to the new element?

I have a script that reads in an element and then deletes the element off the page.  In order to have an "undo" method, I was going to store the elements attributes in an array as an object parameter.  Then when the undo method is called, I was going to rebuild the element by looping thru the stored attributes.

Example trying to copy an element:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
      <title>CopyElement</title>
      <script type="text/javascript">
            function copyMe(e) {
                  eAttributes = e.attributes;
                  var newElement = document.createElement(e.nodeName);
                  for (i=0;i<eAttributes.length; i++) {
                        if (eAttributes[i].specified)
                              newElement.setAttribute(eAttributes[i].nodeName, eAttributes[i].nodeValue);
                  }
                  document.getElementById('placeHolder').appendChild(newElement);

                  if (e.innerHTML) {
                        document.getElementById('placeHolder').firstChild.innerHTML = e.innerHTML;
                  }
            }
      </script>
</head>
<body>
<input type="button" name="testButton" id="testButton" value="Copy Me!" onclick="copyMe(this);">
<hr>
<div id="placeHolder"></div>
</body>
</html>


The above code works fine in Firefox but IE doesn't appear to be applying the value attribute or the onclick event, and possibly others?  

Anyone have suggestions on how I can do this?
0
Comment
Question by:lawrenced1
2 Comments
 
LVL 28

Accepted Solution

by:
Pravin Asar earned 250 total points
ID: 17150594
To create a a copy of an element, you can just clone an element.

Try this one.. it clones, append to placeHolder and remove an element from document.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
     <title>CopyElement</title>
     <script type="text/javascript">
          function copyMe(e) {
               var newElement = e.cloneNode(true);
               document.getElementById('placeHolder').appendChild(newElement);
                     pNode = e.parentNode;
               pNode.removeChild(e);
               if (e.innerHTML) {
                    document.getElementById('placeHolder').firstChild.innerHTML = e.innerHTML;
               }
          }
     </script>
</head>
<body>
<input type="button" name="testButton" id="testButton" value="Copy Me!" onclick="copyMe(this);">
<hr>
<div id="placeHolder"></div>
</body>
</html>
0
 

Author Comment

by:lawrenced1
ID: 17155669
pravinasar ,

Thanks, that got me what I needed.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

947 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now