I am facing an issue where I am trying to move an element from one part of the page to another using JavaScript. I attempted to use the outerHTML property and the appendChild method to achieve this, but I keep encountering an error message stating that Argument 1 of Node.appendChild is not an object.
/* Here is a function for removing the overlay */
(function removeOverlay(){
document.querySelector('div.overlay span a').onclick = function()
{
document.querySelector('div.overlay').style.display ="none";
console.log('I am closing')
};
document.querySelector('div.overlay').addEventListener('click', function(){
this.style.display ="none";
console.log('Im closing with overlay');
});
})();
/* This section activates the overlay */
document.querySelector('button#overlay-on').addEventListener('click',function(){
var overlay = document.querySelector('div.overlay');
overlay.style.display = "block";
var message = document.querySelector('div#message').outerHTML;
var relative = document.querySelector('div.rela');
document.getElementById('message').setAttribute('style','position:absolute; display:block; top:10%; ');
var text = document.createTextNode(document.getElementById('message').offsetWidth);
document.querySelector('div#message p').appendChild(text);
relative.appendChild(message);div.overlay{ height:100%; width:100%; margin:0; padding:0; background:rgba(40, 0, 77,0.7); position:fixed; z-index:100; top:0; left:0; display:none;}
div.rela{height:100%; width:100%; margin:0; padding:0; position:relative; z-index:101;}
div.rela span{ position:absolute; top:0; left:98%; font-weight:bold; font-size:36px; }
div.rela span a{ color:white; text-decoration:none; z-index:152;}
div#message{width:40%; height:20%; background:white; text-align:center; border:1px solid black; font-weight:bold; display:none; z-index:102;}
div#message h5{font-size:18px;}<div class="overlay">
<div class="rela">
<span><a href="#">X</a></span>
</div><!-- end of rela -->
</div><!-- end of overlay -->
<div id="ex1"><h2>Example 1</h2><p></p><h4>results:</h4>
<button id="overlay-on">Open up the overlay</button>
<div id="message">
<h5>Title</h5>
<p>Width is:</p>
</div><!-- end of message -->
</div>