HTML を返す方法、または JavaScript を使用して HTML を構築する方法は?-jsチュートリアル-php.cn

HTML を返す方法、または JavaScript を使用して HTML を構築する方法は?

王林

リリース： 2023-09-10 21:25:06

転載

1204 人が閲覧しました

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

Web アプリケーションを構築する場合、多くの場合、クライアント側で HTML を動的に生成する必要があります。これは JavaScript を使用して行うことができ、さまざまな方法があります。この記事では、HTML を返す方法、または JavaScript を使用して HTML を構築する方法を説明します。

関数から HTML を返す

HTML を動的に生成する 1 つの方法は、関数から 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 の構築

HTML を動的に生成するもう 1 つの方法は、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 を構築するもう 1 つの方法は、 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 に代入して HTML リストを構築します。

<!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" の要素を追加します。