JavaScript 배열에서 HTML 목록을 만드는 방법은 무엇입니까?-JS 튜토리얼-php.cn

JavaScript 배열에서 HTML 목록을 만드는 방법은 무엇입니까?

WBOY

풀어 주다： 2023-08-24 22:29:02

앞으로

1104명이 탐색했습니다.

如何从 JavaScript 数组创建 HTML 列表？

이 튜토리얼에서는 JavaScript 배열에서 HTML 목록을 만드는 다양한 방법을 살펴보겠습니다. 간단한 HTML 목록에 대해 이야기한다면 ul(순서가 지정되지 않은 목록)과 li em>(목록) 태그를 사용하여 모든 목록을 수동으로 생성합니다.

n개의 항목이 있고 이를 목록으로 인쇄해야 하는 상황을 고려하면 모든 항목을 작성하는 것은 매우 바쁜 작업이 될 것입니다. 수동으로 프로젝트하고 인쇄하는 거죠? 그런 다음 JavaScript 반복 방법을 사용하여 쉽게 수행할 수 있습니다.

JavaScript에서 HTML 목록을 만드는 다양한 방법을 살펴보겠습니다.

프래그먼트가 있는 for 루프 사용
forEach() 루프 사용
간단한 for 루프 배열 모두 목록에 있는 항목 이는
createElemnt

를 사용하여 li(목록)을 생성하여 목록 항목을 반복한 다음

ul

(순서가 지정되지 않은 목록) 항목에 추가하는 일반적인 JavaScript 기본 방법입니다.

예

<html>
<body>
   <h3> HTML list using JavaScript using for loop</h3>
   <ul id="UnList"></ul>
   <script>
      let data = ["item1", "item2", "item3", "item4"];
      let list = document.getElementById("UnList");
      for (i = 0; i < data.length; ++i) {
         var li = document.createElement(&#39;li&#39;);
         li.innerText = data[i];
         list.appendChild(li);
      }
   </script>
</body>
</html>

로그인 후 복사

프래그먼트에 for 루프 사용위에서 설명한 첫 번째 방법과 동일하지만 차이점은 Fragment

를 사용하여 삽입한다는 점입니다. 프래그먼트는 이를 별도로 유지하는 경향이 있습니다. 즉, DOM 트리에 연결되지 않고 실제 DOM에 연결되지 않으므로 브라우저가 수행해야 하는 작업이 줄어듭니다. 위의 방법에서는 프래그먼트가 없으면 브라우저가 화면 뒤에서 많은 작업을 수행하므로 실제 성능에 영향을 미치며 실제 페이지에서는 실제로 렌더링되지 않습니다. 따라서 조각을 사용하는 것이 좋습니다.

프래그먼트를 사용하려면 프래그먼트 없이 목록 항목에 직접 삽입하는 대신 먼저 프래그먼트에 목록 항목을 추가한 다음 프래그먼트를 목록에 추가합니다.

Example

<!DOCTYPE html>
<html>
<body>
   <h3>HTML list using JavaScript with fragment</h3>
   <ul id="UnList"></ul>
   <script>
      let data = ["item1", "item2", "item3", "item4"];
      let list = document.getElementById("UnList");
      var fragList = document.createDocumentFragment();
      for (i = 0; i < data.length; ++i) {
         var li = document.createElement(&#39;li&#39;);
         li.textContent = data[i];
         fragList.appendChild(li);
      }
      list.appendChild(fragList);
   </script>
</body>
</html>

로그인 후 복사

forEach() 메소드 사용

forEach()

는 항목의 각 요소에 대해 주어진 함수를 한 번 호출하는 JavaScript의 배열 메소드이며, 기본적으로 항목에 대한 사용자 정의 함수 A 콜백 함수를 수행합니다. 배열 목록에 있는 각 항목은 for 루프와 동일하게 작동합니다.

Example

<!DOCTYPE html>
<html>
<body>
   <h3>HTML list using JavaScript forEach()</h3>
   <ul id="UnList"></ul>
   <script>
      let data = ["item1", "item2", "item3", "item4"];
      let list = document.getElementById("UnList");
      var fragList = document.createDocumentFragment();
      data.forEach(function (item) {
         var li = document.createElement(&#39;li&#39;);
         li.textContent = item;
         fragList.appendChild(li);
      });
      list.appendChild(fragList);
   </script>
</body>
</html>

로그인 후 복사

자바스크립트를 사용하여 직접 HTML 목록을 만드는 방법을 모두 살펴보았습니다. 마음에 드셨으면 좋겠습니다.

위 내용은 JavaScript 배열에서 HTML 목록을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!