javascript - 为什么我不能将 externalHTML 附加到 javascript 中的元素？

Question

我试图抓取位于页面上某个位置的元素，并将其插入到页面另一个区域中的元素中。我认为通过使用 outerHTML 属性获取元素并使用 appendChild 方法将允许我插入该元素。但是，当我运行程序时，我收到一条错误消息，指出Node.appendChild 的参数 1 不是对象

/* This is for clicking off 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');

});

})();


/* 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>

Answer 1

appendChild 仅接受真正的 html 节点作为其参数，如您在 DOM Level 3 Core 中看到的那样

要解决您的问题，您必须首先使用 document.createElement 方法创建一个元素，例如:

(...)
var wrapper = document.createElement('div');
wrapper.innerHTML = message;
relative.appendChild(wrapper);
(...)