從名稱數組製作 HTML 按鈕,並將它們插入到 DOM 中

喬什·範·莫塞爾

我不知道如何使用數組將這些變成按鈕:

var widgetButtons = ["Zoom In", "Zoom Out", "Pan", "Search"]

任何幫助,將不勝感激。這是我嘗試使用的代碼

   <body>
   <div id="demo"></div>
   <script>
        var widgetButtons = ["Zoom In", "Zoom Out", "Pan", 
        "Search"];
   </script>
   </body>
   </html>
西梅毒

這是另一種方法,使用forEach().

ID 不能包含空格,因此我們在設置 id 之前從項目的名稱/文本中刪除空格。

const widgetButtons = ["Zoom In", "Zoom Out", "Pan", "Search"]
const demo = document.getElementById('demo');

widgetButtons.forEach( (item, idx) => {
  const btn = document.createElement('button');
  btn.id = item.replace(' ', '');
  btn.innerText = item;
  demo.appendChild(btn);
});
<html>
  <body>
    <div id="demo"></div>
  </body>
</html>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

在 DOM 中插入 HTML

如何按名稱值從數組中刪除字典元素

如何在兩個數組之間找到重複的整數並將它們複製到一個新數組中?

在 Java 中將值從較大的數組複製到較小的數組

如何將數據從 html 按鈕插入數據庫

將數組中的重複值分組並打印它們 php

從一個數組中刪除元素並將它們添加到一個新數組中

使用名稱中存在的文本從數組中搜索名稱

如何獲取每隔一行(奇數)中的值並將它們移動到每一行(偶數和奇數)或將它們切換到其他行(偶數)?

如何將令牌存儲到給定數組中它們自己的元素中?

如何在不完全轉移按鈕的情況下將按鈕拖動並複製到容器中?

如何從字符串中提取所有整數並將它們存儲在java中的int數組中

在C中將奇數索引元素從一個數組複製到另一個數組

Pandas - 如何將屬性保存到數組中並將它們的值保存到新列中

从DOM中删除HTML

如何製作一個在 HTML 中單擊時將顯示項目的按鈕

將列從excel複製到python中的數組

如何從表列中的輸入中獲取值並將它們相加?

如何顯示作為對像數組中的值的 div 並將其嵌入到 html 頁面中

我想刪除列表中小於 80 的所有數字並將它們移動到另一個列表中

從兩個列表中刪除 'a' 和 'A' 字符並將它們作為對返回

html没有在reactjs中渲染到dom中

從 SQLite 讀取和顯示值並將它們存儲在列表中

從表(HTML)中獲取輸入變量並提供值作為數據庫表的變量名

为什么还应该将HTML DOM属性反映到HTML DOM属性中?

如何合併兩個列表並將它們作為新列表中的元組返回?

show()方法从dom中删除html元素,而不是显示它

如何在Vuejs中按名稱和價格對數組進行排序?

Chrome扩展程序:无法在DOM中插入HTML,权限问题