动态网页？（HTML DOM，js）答案

【问题标题】：Dynamic webpage? (HTML DOM, js)动态网页？（HTML DOM，js）
【发布时间】：2018-10-13 20:12:03
【问题描述】：

我正在尝试使用 DOM JS 更改 HTML 中的内容。我不想通过 P 标签获取元素，而是使用 DIV ID。这可能吗？

在我的 HTML 中，我有两个独立的 DIV 类，它们的名称相同。我希望根据用户单击的按钮显示一个。

HTML：

<button type="button" onclick="changeContent(1)" >Example 1</button>
<button type="button" onclick="changeContent(2)" >Example 2</button>

<p id="demoX"></p>

<div class="ex1">
<h1> Example 1 </h1>
<p> nothing </p>
</div>

<div id="ex1">
<h1> Example 2 </h1>
<p> more of nothing </p>
</div>

JS：

function changeContent(inNum) {
    var x = document.getElementById("ex1");

    if (inNum == 1){
         document.getElementById("demoX").innerHTML = x[0].innerHTML;
    }
    else if (inNum == 2){   
     document.getElementById("demoX").innerHTML = x[1].innerHTML;
    }

}

我该如何处理？

【问题讨论】：

getElementById 返回一个 single 元素，因为 ID 应该是唯一的。您可以更改类的 ID 并使用 getElementsByClassName（注意 Elements 的复数形式）。
试一试，作为一种享受！谢谢

标签： javascript html arrays dom dynamic

【解决方案1】：

首先，您不应该为多个 div 提供相同的 ID，因此只需为它们都提供类 - 'ex1' - 然后通过名为 getElementsByClassName('class-name') 的 JavaScript 选择器选择它们 [replace class-name使用实际的类名，在本例中为 ex1]，此函数获取具有该类名的所有元素并将它们存储在一个数组中。然后您执行按下按钮的逻辑。当按下按钮时，您应该将所需 div 的显示设置为“阻止”[您应该在 CSS 中将其默认为隐藏]。

function showDiv(id) {
  
  var divs = document.getElementsByClassName('ex1');
  
  if (id === 'btn1') { divs[0].style.display = 'block' }
  if (id === 'btn2') { divs[1].style.display = 'block' }
  
}

.ex1 {
  width: 300px;
  height: 300px;
  background-color: green;
  display: none;
  margin: 50px;
}

<button id='btn1' onClick='showDiv(this.id)'>button 1</button>
<button id='btn2' onClick='showDiv(this.id)'>button 2</button>

<div class='ex1'>I'm div 1</div>
<div class='ex1'>I'm div 2</div>

您也可以像在原始代码中所做的那样更改 .style 以更改内部 html。

【讨论】：