Javascript点击事件实现显示10个元素

在Javascript中，通过给元素添加点击事件，可以实现在点击时显示10个元素的功能。

HTML

首先需要在HTML文档中定义一个元素，并给其添加一个id用以在Javascript中引用。我们可以使用<div>元素作为容器，如下：

<div id="container"></div>

Javascript

接下来，在Javascript中，我们可以通过获取容器元素，定义一个函数并将其作为点击事件绑定到容器元素上，来实现点击时显示10个元素的功能。

// 获取容器元素
var container = document.getElementById("container");

// 定义函数
function displayTenElements() {
  // 清空容器
  container.innerHTML = "";
  
  // 添加10个元素
  for (var i = 0; i < 10; i++) {
    var element = document.createElement("div");
    element.innerHTML = "Element " + i;
    container.appendChild(element);
  }
}

// 将函数作为点击事件绑定到容器元素上
container.onclick = displayTenElements;

如上述Javascript代码所示，我们首先获取了容器元素，然后定义了一个displayTenElements函数，其中先清空容器，然后利用一个for循环添加10个元素到容器中。最后，将该函数作为点击事件绑定到容器元素上，即点击容器元素时，该函数将被触发。

结论

通过以上的Javascript代码，当我们在HTML文档中点击元素容器时，即可动态地添加10个元素到容器中，实现了该功能。

Markdown代码片段

# Javascript点击事件实现显示10个元素

在Javascript中，通过给元素添加点击事件，可以实现在点击时显示10个元素的功能。

## HTML

首先需要在HTML文档中定义一个元素，并给其添加一个id用以在Javascript中引用。我们可以使用`<div>`元素作为容器，如下：

```html
<div id="container"></div>

Javascript

接下来，在Javascript中，我们可以通过获取容器元素，定义一个函数并将其作为点击事件绑定到容器元素上，来实现点击时显示10个元素的功能。

// 获取容器元素
var container = document.getElementById("container");

// 定义函数
function displayTenElements() {
  // 清空容器
  container.innerHTML = "";
  
  // 添加10个元素
  for (var i = 0; i < 10; i++) {
    var element = document.createElement("div");
    element.innerHTML = "Element " + i;
    container.appendChild(element);
  }
}

// 将函数作为点击事件绑定到容器元素上
container.onclick = displayTenElements;

如上述Javascript代码所示，我们首先获取了容器元素，然后定义了一个displayTenElements函数，其中先清空容器，然后利用一个for循环添加10个元素到容器中。最后，将该函数作为点击事件绑定到容器元素上，即点击容器元素时，该函数将被触发。

结论

通过以上的Javascript代码，当我们在HTML文档中点击元素容器时，即可动态地添加10个元素到容器中，实现了该功能。