Question

嘿我现在正试图学习JavaScript，我希望能够在我用JavaScript创建的页面上创建一个按钮，但它总是将按钮添加到index.html。请注意我从WebStorm IDE运行它并且没有URL /不知道为window.open（____）放置了什么。

它成功创建一个新窗口，显示“Hello”，但没有按钮。

var myWindow=window.open('');
myWindow.document.write('Hello');
var button=myWindow.document.createElement("newbutton");
button.onclick= function(){
  alert("blabla");
};
var buttonParent= myWindow.document.getElementById("buttonParent");
buttonParent.appendChild(button)

Answer 1

看起来您正在创建一个名为myWindow的新窗口，并将文本hello写入其中。但是，具有id＆＃34; buttonParent＆＃34;的容器不在新窗口中，而是在index.html所在的文档中。

试试这个：

var newDiv = document.createElement("div");      
newDiv.id = "newButtonParent" //make sure you pick a unique id      
myWindow.document.appendChild(newDiv);    
var buttonParent= myWindow.document.getElementById("newButtonParent");     
buttonParent.appendChild(button);

编辑：修正了一个拼写错误。从：

var buttonParent= myWindow.document.getElementById("buttonParent");

到

var buttonParent= myWindow.document.getElementById("newButtonParent");

Answer 2

创建了ID buttonParent 的元素是什么时候？如果这是您的整个代码段，您首先也需要创建该元素，否则.getElementById无法在新窗口中找到任何内容，这意味着.appendChild赢了＆＃39 ;工作正常。

要注意的另一件事是alert是window对象的属性，因此只需调用alert('!')即可将警报附加到主窗口。您需要将其称为myWindow.alert('!')，以便在新窗口中触发它。

此外，document.createElement采用标记名称，因此如果您需要默认按钮行为，则应为

myWindow.document.createElement('button');

这是一个有效的例子。我已将容器元素的背景设置为红色，以便您可以看到它在那里。

DEMO - （点击“运行”按钮。）

var w = window.open(''),
button = w.document.createElement('button');
button.innerHTML = 'My Button';

button.addEventListener('click', function () {
  w.alert('!');
});

var container = w.document.createElement('div');
container.id = 'buttonParent';
container.style.background = 'red';

w.document.body.appendChild(container);
container.appendChild(button);

创建一个包含JavaScript按钮

2 个答案: