使用 DOM JavaScript 將一個 Div 添加到另一個 Div

Question

我正在嘗試使用 CSS 和 JavaScript 創建一個 netflix 類型效果，其中使用 flexbox 將內容顯示在輪播上，並嘗試使用 JavaScript 將 flex 項添加到容器中，就像使用 API 獲取數據一樣，所以永遠不知道會有多少元素只是它與 JavaScript 一起工作。

const container = document.getElementById("container");
var newDiv = document.createElement("div");
newDiv.className = "item";
var arr = ["1","1","1"];

const map = arr.map(x => {return `<div>${x}</div>`});
console.log(map)
map.forEach(function(element){
    newDiv.innerHTML = element;
    container.append(newDiv)
});

容器具有類容器，額外的 div 具有類項

這是HTML：

<body>
    <!--Title for the Page-->
    <h1 id="title">Will and Amys Movie App</h1>

    <!--Grid Layout-->
    <div id="container">
        <div class="item"></div>
    </div>
</body>

Uncaught TypeError: container is null
    <anonymous> file:///D:/Github/MovieSummerProject22/script.js:8
    <anonymous> file:///D:/Github/MovieSummerProject22/script.js:4
script.js:8:5
    <anonymous> file:///D:/Github/MovieSummerProject22/script.js:8
    map self-hosted:180
    <anonymous> file:///D:/Github/MovieSummerProject22/script.js:4

Answer 1

改變你的newDiv.innerHTML = element; 到newDiv.innerHTML += element;

這也可以改進一點，你可以只使用map ，不需要循環兩次

請注意，您正在創建一個額外的div ，這是您不想要的。

 const container = document.getElementById("container"); const arr = ["1", "1", "1"]; arr.map(x => { const newDiv = document.createElement("div"); newDiv.className = "item"; newDiv.innerHTML += x; container.append(newDiv) });

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

使用 DOM JavaScript 將一個 Div 添加到另一個 Div

問題描述

1 個解決方案

解決方案1
1 2022-06-18 22:23:29

使用 DOM JavaScript 將一個 Div 添加到另一個 Div

問題描述

1 個解決方案

解決方案1 1 2022-06-18 22:23:29

解決方案1
1 2022-06-18 22:23:29