JavaScriptを使用してHTMLを変更する方法

JavaScript は、Web 開発、特に HTML ドキュメントのコンテンツの変更に広く使用されている強力なスクリプト言語です。この記事では、JavaScriptを使用してHTMLを変更する方法を紹介します。

1. HTML 要素の取得

JavaScript を使用して HTML を変更する前に、まず変更する HTML 要素を取得する必要があります。 getElementById() メソッド、getElementsByClassName() メソッド、getElementsByTagName() メソッド、およびドキュメント オブジェクトのその他のメソッドを使用して、HTML 要素を取得できます。

たとえば、ID「content」を持つ div 要素を取得する場合:

var content = document.getElementById("content");

2. HTML 要素のコンテンツを変更します

HTML 要素を参照すると、JavaScript を使用して HTML のコンテンツを変更できます。 JavaScript には、HTML 要素のコンテンツを変更するためのさまざまなメソッドが用意されています。一般的なメソッドの一部を次に示します。

1. innerHTML 属性

innerHTML 属性は、HTML 要素内のコンテンツを取得または設定できます。たとえば、次のコードは、ID が「content」である div 要素の内容を「Hello World!」に変更します。

content.innerHTML = "Hello World!";

2. textContent プロパティ

textContent プロパティHTML 要素内のテキスト コンテンツを取得または設定できます。たとえば、次のコードは、ID が「content」である div 要素のテキスト コンテンツを「Hello World!」に変更します。

content.textContent = "Hello World!";

3. innerText プロパティ

TheinnerText プロパティまたは HTML 要素内のテキスト コンテンツを設定することで取得できますが、HTML マークアップは表示されません。たとえば、次のコードは、HTML タグを表示せずに、ID が「content」である div 要素のテキスト コンテンツを「Hello World!」に変更します。

content.innerText = "Hello World!";

上記のメソッドを使用すると、HTML を簡単に変更できます。文書の内容。

3. HTML 要素の追加

HTML 要素のコンテンツを変更するだけでなく、JavaScript を使用して HTML 要素を追加することもできます。 HTML 要素は、ドキュメント オブジェクトの createElement() メソッドを使用して作成し、appendChild() または insertBefore() メソッドを使用して HTML に挿入できます。

たとえば、次のコードは新しい p 要素を作成し、それを ID「content」を持つ div 要素に挿入します。

var newParagraph = document.createElement("p");
newParagraph.textContent = "This is a new paragraph.";
content.appendChild(newParagraph);

上記のコードは、新しい p 要素をID「content」を持つ div 要素の終わり。

ID「content」を持つ div 要素の先頭に新しい p 要素を挿入したい場合は、insertBefore() メソッドを使用できます。次のコードは、新しい p 要素を作成し、ID「content」を持つ div 要素の先頭に挿入します。

var newParagraph = document.createElement("p");
newParagraph.textContent = "This is a new paragraph.";
content.insertBefore(newParagraph, content.firstChild);

上記のコードは、ID「content」を持つ div に新しい p 要素を挿入します。 " 要素の始まり。

4. HTML 要素の削除

最後に、JavaScript を使用して HTML 要素を削除することもできます。 HTML 要素は、removeChild() メソッドを使用して HTML から削除できます。

たとえば、次のコードは、ID「content」を持つ div 要素から最初の子要素を削除します。

content.removeChild(content.firstChild);

上記のコードは、次のような div 要素から最初の子要素を削除します。 ID「content」は子要素です。

概要

この記事では、JavaScript を使用して HTML ドキュメント内のコンテンツを変更する方法を学びました。ドキュメント オブジェクトの getElementById() メソッド、getElementsByClassName() メソッド、getElementsByTagName() メソッドを使用して HTML 要素を取得し、innerHTML 属性、textContent 属性、innerText 属性、およびその他の属性を使用して HTML 要素のコンテンツを変更できます。 createElement() メソッド、appendChild() メソッド、insertBefore() メソッドおよびその他のメソッドを使用して HTML 要素を追加し、removeChild() メソッドを使用して HTML 要素を削除します。これらの方法をマスターすると、JavaScript を使用して HTML ドキュメントのコンテンツを簡単に変更できます。

以上がJavaScriptを使用してHTMLを変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。