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);
(...)

Answer 2

关于你的示例javascript代码，似乎你忘了关闭：

document.querySelector('button#overlay-on').addEventListener('click',function(){

带

});

当我关闭它时，似乎有效。这是问题吗？或者您可能遇到跨浏览器问题？

为什么我不能在javascript中将outerHTML附加到元素？

2 个答案: