0

こんにちは、これは簡単かもしれませんが、私は新しく、2 つの問題について助けが必要であることを学んでいます。

まず、document.createElement()その要素にクラスまたはIDを追加する方法を使用して要素を作成するときは?

className = ""----またはid=""、変数を追加して、追加して id という名前の配列から生成されたデータを区別することによって、この問題の解決策を見つけました----

第二にcreateTextNode()、innerHTML の使用を避けるために使用して、改行タグを追加する方法は?

私はの配列を持っているとしましょうitems = [{id: "item-1", name: "apple", price:1} , {id:"item-2" ,name : "mango", price:3}];

そして、私はそれらを通り抜けたい：

let data = document.getElementById("items-data"); 
items.forEach(item => {
                   let container = document.createElement("div"),  //here i want to add a defined id for further use
                       itemData = document.createTextNode(
                                  `item name : ${item.name} price: ${item.price}`); //here i want to add the br
    container.appendChild(itemData);
    container.id = item.id;
    data.appendChild(container);
};
4

1 に答える 1

1

次のような意味ですか。

container.appendChild(document.createElement("br"));


let base = document.querySelector(".base");

let items = [{
  id: "item-1",
  name: "apple",
  price: 1
}, {
  id: "item-2",
  name: "mango",
  price: 3
}];

items.forEach(item => {
  let container = document.createElement("div"), //here i want to add a defined id for further use
    itemData = document.createTextNode(
      `item name : ${item.name} price: ${item.price}`); //here i want to add the br
  container.appendChild(itemData);
  container.appendChild(document.createElement("br")); // <-- Add the line break to the node element
  container.id = item.id;
  base.appendChild(container);
});
<div class="base"></div>

于 2020-06-27T14:48:08.850 に答える