jQuery を使用して HTML 要素に ID を追加する
jQuery では、明示的な関数はクラスを HTML 要素に追加するためだけに機能します。 このメソッドは addClass("className") として使用されます。
しかし、id を追加する場合、そのようなメソッドは定義されていません。 一般に、HTML 要素の id は、特異性の点で、HTML 要素をより差別化し、強力にします。
ここでは、HTML 要素に id を追加する 2つの方法を検討します。 そして、プロセス全体が jQuery 規則を介して実行されます。
最初の解決策は、.attr() メソッドを使用して、属性 id と対応する値を追加することです。 これにより、要素に設定された id が作成されます。
次に、id を追加できるが、前のものほど定義されていない例に進みます。 ここでは、HTML 要素を .add() メソッドのパラメーターとして受け取り、id を追加します。
それでは、インスタンスで説明をプレビューしてみましょう。
.attr() メソッドを使用して、jQuery を使用して HTML 要素に ID を追加する
HTML の例の body 要素に p タグがあり、強調表示したい特定の単語が p タグにあります。 また、関連するタグがあれば可能で、一意の id を持たせることができます。
そのため、span タグを作成し、それに対して id を作成し、CSS プロパティを追加して、新しく作成した id が機能するかどうかを確認します。
コードスニペット：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<title>attr Id</title>
</head>
<body>
<p>Welcome to <span>DelftStack</span></p>
<script>
$("span").attr("id","intro");
$("#intro").css("color","darkcyan");
</script>
</body>
</html>
出力：
.add() メソッドを使用して、jQuery を使用して HTML 要素に ID を追加する
この場合、p タグがありますが、p タグの下に span を割り当てていません。 p タグのインスタンスを取得し、.add() メソッドを介して HTML 要素を追加し、p タグに追加します。
新しく作成された要素を追加するまで、その存在は示されません。 コード行を確認してみましょう。
コードスニペット：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<title>attr Id</title>
</head>
<body>
<p>Welcome to </p>
<script>
$("p").add("<span id='intro'>DelftStack</span>").appendTo("p");
$("#intro").css("color","royalblue");
</script>
</body>
</html>
出力：
