JavaScript を使用して要素に ID を追加する
-
setAttribute()関数を使用して、JavaScript の要素にidを追加する -
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 属性の新しい値を設定し、コンソールに出力して変更されたことを確認します。
これで、id が firstParagraph から 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 を追加しています。
