JavaScript JQuery HTMLタグの入れ替えで表示を変える方法について

2021/10/14

HTMLタグの入れ替ることにより、表示内容を変えることは特に難しくはありません。
以下の例では div タグの中の p タグを入れ替えています。 JQuery の remove メソッドで対象となるタグを全て削除し append メソッドでタグを挿入し、テキストを変更するものです。

remove メソッドは指定したセレクタ（タグ）そのものも削除するので注意が必要です。なお、中身だけ削除する場合は empty メソッドを使います。

<html>
<head>
<meta charset="utf-8">
<title>test tag exchg 1</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
//変更1
function exchg1() {
    $("#main p").remove();
    var tag = "";
    tag += "<p>";
    tag += " 変更11111";
    tag += "</p>";
    $("#main").append(tag);
}
//変更2
function exchg2() {
    $("#main p").remove();
    var tag = "";
    tag += "<p>";
    tag += " 変更2222";
    tag += "</p>";
    $("#main").append(tag);
}
</script>
</head>
<body>
    <h2>test tag exchg 1</h2>
    <div id="main">
      <p>
        test initial document
      </p>
	</div>
    <br />
    <button onclick="exchg1();">Exchange1</button>
    <button onclick="exchg2();">Exchange2</button>
</body>
</html>

remove メソッドを empty メソッドに変更した例を以下に記します。

■empty メソッドでの処理

以下の例では p タグの中身を削除して append メソッドで文字列を追加しています。

<html>
<head>
<meta charset="utf-8">
<title>test tag exchg 1-1</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
//変更1
function exchg1() {
    $("#main p").empty();
    var tag = "";
    tag += " 変更11111";
    $("#main p").append(tag);
}
//変更2
function exchg2() {
    $("#main p").empty();
    var tag = "";
    tag += " 変更2222";
    $("#main p").append(tag);
}
</script>
</head>
<body>
    <h2>test tag exchg 1-1</h2>
    <div id="main">
      <p>
        test initial document
      </p>
	</div>
    <br />
    <button onclick="exchg1();">Exchange1</button>
    <button onclick="exchg2();">Exchange2</button>
</body>
</html>

■タグの書き換えで連続的な処理を行う様にする

タグの書き換えは静的なテキストだけでは無く、その他のタグを含む文字列を置き換えることができます。
以下の例では div タグの中の p タグにボタンタグを入れ替えています。ボタンタグを動的に作成しても onclick イベントは利く様です。

最初の「Exchange0」ボタンクリックで「Exchange1」「Exchange2」のボタンが現れそれぞれのクリックで以下の様に処理が進みます。
「Exchange1」⇒「Exchange1_1」⇒「Exchange0」(画面が最初の表示)
「Exchange2」⇒「Exchange2_1」⇒「Exchange0」(画面が最初の表示)

<html>
<head>
<meta charset="utf-8">
<title>test tag exchg 2</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
//変更0
function exchg0() {
    $("#main p").empty();
    var tag = "";
    tag += " <button onclick='exchg1();'>Exchange1</button>";
    tag += " <button onclick='exchg2();'>Exchange2</button>";
    $("#main p").append(tag);
}
//変更1
function exchg1() {
    $("#main p").empty();
    var tag = "";
    tag += " <button onclick='exchg1_1();'>Exchange1_1</button>";
    $("#main p").append(tag);
}
//変更1_1
function exchg1_1() {
    $("#main p").empty();
    var tag = "";
    tag += " 変更11111<br />";
    tag += " <button onclick='exchg0();'>Exchange0</button>";
    $("#main p").append(tag);
}

//変更2
function exchg2() {
    $("#main p").empty();
    var tag = "";
    tag += " <button onclick='exchg2_1();'>Exchange2_1</button>";
    $("#main p").append(tag);
}
//変更2_1
function exchg2_1() {
    $("#main p").empty();
    var tag = "";
    tag += " 変更22222<br />";
    tag += " <button onclick='exchg0();'>Exchange0</button>";
    $("#main p").append(tag);
}
</script>
</head>
<body>
    <h2>test tag exchg 2</h2>
    <div id="main">
      <p>
        test initial document
	    <br />
	    <button onclick="exchg0();">Exchange0</button>
      </p>
	</div>
</body>
</html>

以上のことから HTML の中に何も無くても、順次 Javascript プログラムから処理を行うタグを条件に合わせて変化させることができます。

結果 Javascript プログラムを使ってWEBページを動的に変化させることが出来る様になります。

VB.NET-TIPS などプログラミングについて

■empty メソッドでの処理

■タグの書き換えで連続的な処理を行う様にする

関連する記事

コメント