JavaScript를 사용하여 HTML을 반환하거나 HTML을 작성하는 방법은 무엇입니까?-JS 튜토리얼-php.cn

JavaScript를 사용하여 HTML을 반환하거나 HTML을 작성하는 방법은 무엇입니까?

王林

풀어 주다： 2023-09-10 21:25:06

앞으로

1205명이 탐색했습니다.

如何使用 JavaScript 返回 HTML 或构建 HTML？

웹 애플리케이션을 구축할 때 클라이언트 측에서 HTML을 동적으로 생성해야 하는 경우가 많습니다. 이는 JavaScript를 사용하여 수행할 수 있으며 이를 수행하는 방법에는 여러 가지가 있습니다. 이 글에서는 HTML을 반환하는 방법이나 JavaScript를 사용하여 HTML을 작성하는 방법을 보여 드리겠습니다.

함수에서 HTML 반환

HTML을 동적으로 생성하는 한 가지 방법은 함수에서 HTML 문자열을 반환하는 것입니다. 예를 들어, 목록 항목을 생성하는 함수가 있다고 가정해 보겠습니다. -

function generateListItem(text) {
   return &#39;<li>&#39; + text + &#39;</li>&#39;;
}

로그인 후 복사

그러면 이 함수를 사용하여 HTML을 생성할 수 있습니다. -

function generateListItem(text) {
   return &#39;<li>&#39; + text + &#39;</li>&#39;;
}

var list = '';
list += generateListItem('Item 1');
list += generateListItem('Item 2');
list += generateListItem('Item 3');
list += '';

console.log(list)

로그인 후 복사

목록 변수에는 이제 다음 HTML이 포함됩니다. -

<ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
</ul>

로그인 후 복사

DOM 메서드를 사용하여 HTML 빌드

동적으로 generate HTML 또 다른 방법은 DOM 메서드를 사용하여 HTML 구조를 만드는 것입니다. 요소를 생성한 다음 DOM에 추가하면 됩니다. 예를 들어, 이전과 동일한 항목을 포함하는 목록을 만들고 싶다고 가정해 보겠습니다. -

var list = document.createElement(&#39;ul&#39;);

var item1 = document.createElement(&#39;li&#39;);
item1.innerText = &#39;Item 1&#39;;
list.appendChild(item1);

var item2 = document.createElement(&#39;li&#39;);
item2.innerText = &#39;Item 2&#39;;
list.appendChild(item2);

var item3 = document.createElement(&#39;li&#39;);
item3.innerText = &#39;Item 3&#39;;
list.appendChild(item3);

로그인 후 복사

이제 목록 변수에는 다음 HTML이 포함됩니다. -

<ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
</ul>

로그인 후 복사

Example

아래 예에서는 다양한 DOM 메서드를 사용하여 HTML을 작성합니다. 목록.

<!DOCTYPE html>
<html>
<body>
   <h2> Building HML using DOM methods</h2>
   <div id="parent">
      <p> We create a list by generating HTML elements</p>
      <h4 id="child">Tutorials List</h4>
   </div>
   <div id="result"></div>

   <script>
      var list = document.createElement(&#39;ul&#39;);
      var item1 = document.createElement(&#39;li&#39;);
      item1.innerText = &#39;JavaScript&#39;;
      list.appendChild(item1);

      var item2 = document.createElement(&#39;li&#39;);
      item2.innerText = &#39;Python&#39;;
      list.appendChild(item2);

      var item3 = document.createElement(&#39;li&#39;);
      item3.innerText = &#39;Rupy&#39;;
      list.appendChild(item3);
      document.getElementById("result").appendChild(list)
   </script>
</body>
</html>

로그인 후 복사

위 프로그램에서는 createElement 메소드를 사용하여 정렬되지 않은 목록과 목록 항목을 생성했습니다. AppendChild 메소드는 목록 항목을 목록에 추가하는 데 사용됩니다.

innerHTML을 사용하여 HTML 작성

HTML을 작성하는 또 다른 방법은 innerHTML 속성을 사용하는 것입니다. 요소를 생성한 다음 innerHTML 속성을 HTML 문자열로 설정하면 됩니다. 예를 들어 이전과 동일한 항목을 포함하는 목록을 생성한다고 가정해 보겠습니다. -

var list = document.createElement(&#39;ul&#39;);
list.innerHTML = &#39;<li>Item 1</li><li>Item 2</li><li>Item 3</li>&#39;;

로그인 후 복사

이제 목록 변수에는 다음 HTML이 포함됩니다. -

<ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
</ul>

로그인 후 복사

Example

아래 예에서는 innerHTML 에 목록을 추가하세요.

<!DOCTYPE html>
<html>
<body>
   <div id="result"> List </div>
   <script>
      var list = document.createElement(&#39;ul&#39;);
      list.innerHTML = &#39;<li>Item 1</li><li>Item 2</li><li>Item 3</li>&#39;;
      document.getElementById("result").appendChild(list)
   </script>
</body>
</html>

로그인 후 복사

위 프로그램에서는 createElement 메소드를 사용하여 목록을 생성합니다. 목록 항목을 목록에 추가하려면 innerHTML을 사용하세요. 목록을 표시하려면 appendChild 메서드를 사용하여 id = "result"인 요소를 추가합니다.