Solved

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

Posted on 2006-07-20
2
1,434 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
Comment Utility
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
Comment Utility
pravinasar ,

Thanks, that got me what I needed.
0

Featured Post

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
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.
Viewers will learn about if statements in Java and their use The if statement: The condition required to create an if statement: Variations of if statements: An example using if statements:
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

744 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

17 Experts available now in Live!

Get 1:1 Help Now