JavaScript中一行的两个原生按钮

在JavaScript中，我们可以快速创建并添加原生按钮到我们的网页中。下面的代码可以创建一个包含两个按钮的div元素，并将其添加到body中。

const div = document.createElement('div');
const button1 = document.createElement('button');
const button2 = document.createElement('button');

button1.textContent = 'Button 1';
button2.textContent = 'Button 2';

div.appendChild(button1);
div.appendChild(button2);
document.body.appendChild(div);

在这个例子中，我们使用了document.createElement()方法创建了div、button1和button2元素。我们通过textContent属性设置了按钮的标签。最后，我们使用appendChild()方法将按钮添加到div元素中，并将div元素添加到body元素中。

更改按钮的样式

要更改按钮的样式，可以使用CSS。可以通过设置button元素的style属性来更改其样式，如下所示：

button1.style.backgroundColor = 'blue';
button2.style.backgroundColor = 'green';
button1.style.color = 'white';
button2.style.color = 'white';

在这个例子中，我们使用了backgroundColor和color属性来更改按钮的背景颜色和文字颜色。

在按钮上添加事件

要在按钮上添加事件，可以使用addEventListener()方法。例如，以下代码将在点击button1时弹出一个警告框：

button1.addEventListener('click', () => {
  alert('Button 1 clicked');
});

在这个例子中，我们使用了addEventListener()方法来监听button1的click事件，并在该事件发生时弹出一个警告框。

完整代码示例

const div = document.createElement('div');
const button1 = document.createElement('button');
const button2 = document.createElement('button');

button1.textContent = 'Button 1';
button2.textContent = 'Button 2';

button1.addEventListener('click', () => {
  alert('Button 1 clicked');
});

button1.style.backgroundColor = 'blue';
button2.style.backgroundColor = 'green';
button1.style.color = 'white';
button2.style.color = 'white';

div.appendChild(button1);
div.appendChild(button2);
document.body.appendChild(div);

以上是一个完整的代码示例，它创建了两个原生按钮，并为其中一个按钮添加了一个点击事件。它还更改了按钮的样式，使它们具有不同的背景颜色和字体颜色。