Solved

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

Posted on 2006-07-20
2
1,474 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 29

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

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

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

What is Node.js? Node.js is a server side scripting language much like PHP or ASP but is used to implement the complete package of HTTP webserver and application framework. The difference is that Node.js’s execution engine is asynchronous and event…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

624 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