documentFragment관련 질문 #88

Closed 89yunik closed 2 years ago

In GitLab by @sori on May 30, 2022, 18:05

function makeCartLists(data) {
  const id = data._id;
  const quantity = data.quantity;
  return `<div class="cart-product-item" id="productItem-${id}" data-id="${id}">
    <label class="checkbox">
      <input type="checkbox" id="checkbox-${id}" checked class="check-item" />
    </label>
    <button class="delete-button" id="delete-${id}">
      <span class="icon">
        <i class="fas fa-trash-can" aria-hidden="true"></i>
      </span>
    </button>
    <figure class="image is-96x96">
      <img
        id="image-${id}"
        src="./sampleData/images/sodong.png"
        alt="product-image"
      />
    </figure>
    <div class="content">
      <p id="title-${id}">${data.name}</p>
      <div class="quantity">
        <button
          class="button is-rounded"
          id="minus-${id}"
          disabled=""
        >
          <span class="icon is-small">
            <i class="fas fa-thin fa-minus" aria-hidden="true"></i>
          </span>
        </button>
        <input
          class="input"
          id="quantityInput-${id}"
          type="number"
          min="1"
          max="99"
          value="${quantity}"
        />
        <button class="button is-rounded" id="plus-${id}">
          <span class="icon">
            <i class="fas fa-lg fa-plus" aria-hidden="true"></i>
          </span>
        </button>
      </div>
    </div>
    <div class="calculation">
      <p id="unitPrice-${id}">${data.price}원</p>
      <p>
        <span class="icon">
          <i class="fas fa-thin fa-xmark" aria-hidden="true"></i>
        </span>
      </p>
      <p id="quantity-${id}">${quantity}</p>
      <p>
        <span class="icon">
          <i class="fas fa-thin fa-equals" aria-hidden="true"></i>
        </span>
      </p>
      <p id="total-${id}">${data.price * quantity}원</p>
    </div>
  </div>`;
}

//'cart'에 있는 내용 화면에 나타내기
function displayCartLIsts() {
  const cartProductsContainer = document.querySelector('#cartProductsContainer');

  const cartStorage = JSON.parse(sessionStorage.getItem('cart'));
  let documentFragment = document.createDocumentFragment();
  let div = document.createElement('div');

  cartStorage.forEach((item) => {
    const list = makeCartLists(item, item.quantity);
    div.insertAdjacentHTML('beforeend', list);
  });
  documentFragment.appendChild(div);
  cartProductsContainer.appendChild(div);
  }

저번에 알려주신 documentfragment를 활용해보려 합니다.
문제는
documentFragment에 appendChild를 하면 node가 아니라서 오류가 나고 append를 하면 문자열로 들어가게 됩니다..
documentFragment에 append를 하면 문자열로 인식해서 들어갑니다.
그래서 documentFragment.insertAdjacentHTML을 하려고 했는데 오류가 나서
결국 div를 만들어서 했는데 그럼 굳이 documentFragment가 필요가 없어지는 것 같습니다...
이렇게 하는게 아닌것같은데 조언 부탁드립니다!

In GitLab by @minukang on May 30, 2022, 20:23


const template = document.createElement('template')
template.innerHTML = '<h1>Hello <strong>World</strong></h1>'
template.content; // DocumentFragment 객체

89yunik / elice-shoppingmall-team06

documentFragment관련 질문 #88