JavaScript を使用して要素に ID を追加する

Mehvish Ashiq 2023年10月12日
  1. setAttribute() 関数を使用して、JavaScript の要素に id を追加する
  2. JavaScript を使用して既存の要素に id を追加する
  3. JavaScript を使用して新しい要素に id を追加する
JavaScript を使用して要素に ID を追加する

id 属性は JavaScript で重要な役割を果たします。これは、getElementById() 関数に適した特定の要素に関連しています。id は、後で HTML 要素の値とコンテンツを取得するのに役立つため、HTML ページで一意である必要があります。

id 属性の重要性を考慮して、このチュートリアルでは、JavaScript を使用して既存または新しい HTML 要素に id 属性を追加する方法を説明します。

setAttribute() 関数を使用して、JavaScript の要素に id を追加する

既存および新しい HTML 要素の場合、setAttribute() 関数と .id プロパティが使用されます。setAttribute() は 2つのパラメーターを取ります。

1つ目は属性名で、2つ目は属性の値です。たとえば、最初のパラメータは id であり、2 番目のパラメータはその特定の要素に id 属性を追加するための任意の文字列にすることができます。

一方、id 属性の値を .id プロパティに直接割り当てることができます。次の HTML スタートアップコードを使用して、既存の新しい要素に id を追加します。

HTML コード:

<!DOCTYPE html>
<html>
 <head>
 <title>Add IDs</title>
 </head>
 <body>
 <h1 id="First Heading">My First Heading</h1>
 <p id="firstParagraph">My first paragraph.</p>
 </body> 
</html>

JavaScript を使用して既存の要素に id を追加する

var firstP = document.getElementById('firstParagraph');
firstP.setAttribute('id', 'firstPracPara');
console.log(document.getElementById('firstPracPara').id);

firstP.id = 'newPracPara';
console.log(document.getElementById('newPracPara').id);

出力:

"firstPracPara"
"newPracPara"

上記のコードでは、2つの方法を使用して id 属性を追加しました。1つ目は setAttribute() メソッドで、2つ目は .id プロパティです。

まず、id の値が firstParagraph である要素を取得し、setAttribute() 関数を使用して id 属性の新しい値を設定し、コンソールに出力して変更されたことを確認します。

これで、idfirstParagraph から firstPracPara に変更されました。.id プロパティを使用して、もう一度変更してみましょう。

id の最新の値は newPracPara です。確認のためにコンソールにも出力しました。上記の出力を見ることができます。

JavaScript を使用して新しい要素に id を追加する

var secondP = document.createElement('p');
secondP.setAttribute('id', 'secondPara');
console.log(secondP.id);

secondP.id = 'newPara';
console.log(secondP.id);

出力:

"secondPara"
"newPara"

ここでは、最初に createElement() 関数を使用して新しい要素を作成し、次に setAttribute() メソッドと .id プロパティを使用して id を追加しています。

著者: Mehvish Ashiq
Mehvish Ashiq avatar Mehvish Ashiq avatar

Mehvish Ashiq is a former Java Programmer and a Data Science enthusiast who leverages her expertise to help others to learn and grow by creating interesting, useful, and reader-friendly content in Computer Programming, Data Science, and Technology.

LinkedIn GitHub Facebook

関連記事 - JavaScript Element