HTMLの取得と変更

2015年10月29日

text()で、テキストの取得・変更ができましたが、HTMLのタグを含むテキストの変更をする場合は、html()という命令を使用します。

HTMLの変更

HTMLを変更するには、html(...)の内側に変更後のHTMLを書きます。

$("p#test1").html("実験してみる。");

サンプルコードみて頂ければ分かりますが、「これからhtml()で変更する。」という物が変わっているのが分かります。

HTMLの取得

値を取得するには「$("p#test1").html()」というようにhtml()で取得します。前回紹介したtext()と同様です。

HTMLの挿入

html()を使用すると、もともと存在していた要素の内容が全て上書きされてしまいます。

要素の内容を残したままでHTMLに追加するときは、要素を挿入する以下の命令prepend(),append(),before(),after()を使用します。

prepend()

指定した要素内部の先頭にHTMLを挿入するには、prepend()という命令を使います。html()と同様に追加したいHTMLを括弧内に書きます。

$("p#test2").prepend("先頭に文字を挿入！");

append()

指定した要素内部の最後にHTMLを挿入するには、append()という命令を使います。追加したいHTMLを括弧内に書きます。

$("p#test2").append("最後に文字を挿入！");

before()

指定した要素の前にHTMLを挿入するには、before()を使います。

$("p#test1").before("指定した要素の前に挿入<br>");

after()

指定した要素の後にHTMLを挿入するには、before()を使います。

$("p#test1").after("指定した要素の後に挿入<br>");

HTMLの移動

HTMLの要素を文内に新たに追加をするものではなく、もともと存在していた要素を文書内の位置を変更することができます。

prependTo()

指定した要素を他の要素の内部の先頭に移動させるには、prependTo()命令を使います。括弧内に移動先の要素をセレクターで指定します。

$("p#test2 strong").prependTo("p#test3");

appendTo()

指定した要素を他の要素の最後の先頭に移動させるには、appendTo()命令を使います。括弧内に移動先の要素をセレクターで指定します。

$("p#test3 strong").appendTo("p#test2");

insertBefore()

指定した要素を他の要素の前に移動したいときは、insertBefore()使います。

$("p#test3").insertBefore("p#test1");

insertAfter()

指定した要素を他の要素の後に移動したいときは、insertAfter()使います。

$("p#test2").insertAfter("p#test3");

実行結果はこちらです。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQueryStudy</title>

    <style>
	*{margin:0;padding:0;}
	
    #container{
        width:640px;
        height:400px;
        margin:0 auto;}
    p{
        border:1px solid black;
        background-color:bisque;
        width:450px;
        height:60px;
    }
    </style>    
    
    <script src="js/jquery-1.11.3.js"></script>  
    
</head>
<body>

<div id="container">
    <br>
    <p id="test1">これからhtml()で変更する。</p>
    <p id="test2"></p>
    <p id="test3"></p>
    
</div><!--contatiner-->

<script>
$(document).ready(function(){
    
    //p#test1の箇所を変更する。
    $("p#test1").html("ここを<strong>変更しました。</strong>");

    //p#test1の値を取得して、その情報をp#test2に設定する。
    $("p#test2").html($("p#test1").html());
    
    //先頭に文字列を挿入する
    $("p#test1").prepend("先頭に文字を挿入！");

    //最後に文字列を挿入する
    $("p#test1").append("最後に文字を挿入！");

    
    //HTMLの要素内の先頭へ移動
    $("p#test2 strong").prependTo("p#test3");
    
    //HTML要素の後ろに挿入
    $("p#test3 strong").appendTo("p#test2");

    //指定した要素の前に挿入
    $("p#test1").before("指定した要素の前に挿入<br>");

    //指定した要素の後に挿入
    $("p#test1").after("指定した要素の後に挿入<br>");

    //HTML要素の前に移動
    $("p#test3").insertBefore("p#test1");

    //HTML要素の後に移動
    $("p#test2").insertAfter("p#test3");

});

</script>
</body>
</html>

<!doctype html>

<html>

<head>

<title>jQueryStudy</title>

<style>

*{margin:0;padding:0;}

#container{

width:640px;

height:400px;

margin:0 auto;}

border:1px solid black;

background-color:bisque;

width:450px;

height:60px;

}

</style>

</head>

<body>

<br>

<p id="test1">これからhtml()で変更する。</p>

</div>

$(document).ready(function(){

//p#test1の箇所を変更する。

$("p#test1").html("ここを<strong>変更しました。</strong>");

//p#test1の値を取得して、その情報をp#test2に設定する。

$("p#test2").html($("p#test1").html());

//先頭に文字列を挿入する

$("p#test1").prepend("先頭に文字を挿入！");

//最後に文字列を挿入する

$("p#test1").append("最後に文字を挿入！");

//HTMLの要素内の先頭へ移動

$("p#test2 strong").prependTo("p#test3");

//HTML要素の後ろに挿入

$("p#test3 strong").appendTo("p#test2");

//指定した要素の前に挿入

$("p#test1").before("指定した要素の前に挿入<br>");

//指定した要素の後に挿入

$("p#test1").after("指定した要素の後に挿入<br>");

//HTML要素の前に移動

$("p#test3").insertBefore("p#test1");

//HTML要素の後に移動

$("p#test2").insertAfter("p#test3");

});

</script>

</body>

</html>

-jQuery
-after(), append(), before(), HTML, prepend(), 挿入, 追加

comment コメントをキャンセル

: jQuery

ストライブテーブルを作成する。

ストライプテーブルとは、1行(列)おきに、異なる色を敷いたテーブルの事です。偶数行(列)、奇数行(列)にそれぞれ背景色を設定することで、表が見やすくなります。コードの中にコメントを追記しました。 ...

: jQuery

フォームの部品の値を取得したり変更する命令

フォームを操作する専用の命令がval()です。この命令を使用すると、フォームに入力または、選択されている value属性の値を取得・変更することが可能です。 value属性の値を取得する val() ...

jQuery

jQueryでスライドショーを作ってみる

タイトルの通りです。簡単なスライドショーを作成してみました。サンプルコードの実行結果はこちら

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>スライドショーを作ってみる</title>
   
    <script src="js/jquery-1.11.3.js"></script>
    <script src="js/ui/jquery-ui.js"></script>

    <style>
        *{margin:0;padding:0;}
        
        .slideShow{
            position:relative;
            width:320px;
            height:180px;
            overflow:hidden;
        }
        .slideShow img{
            position:absolute;
            left:0;
            display:none;
        }
    </style>

</head>
<body>
<div class="slideShow">
    <img src="../img/0.JPG">
    <img src="../img/1.JPG">
    <img src="../img/2.JPG">
    <img src="../img/3.JPG">    
</div>
    
<script>
$(function(){
    
    /*
    each.～の箇所
    jQueryがHTMLの中から「.slideShow」というクラスを持った
    要素を探してきて、それぞれに対してこの括弧内の処理を実行する。
    
    今回のサンプルでは「.slideShow」は一つだけなので処理は一回だけです。
    */
    $(".slideShow").each(function(){
        
        //全てのスライド
        var $slide = $(this).find("img"),
            
        //現在のスライドを示す番号を格納
            currentNum = 0;
        
        //スライドを徐々に表示する
        $slide.eq( currentNum ).fadeIn();
        
        //2000/1000=２秒間隔で「showNextSlide」を呼び出す
        setInterval( showNextSlide,2000);
        
        function showNextSlide(){
            /*
                $slide.lengthは、$slideの要素数が入っています。
                今回は画像が４枚なので「４」が格納されています。                
            */
            var nextSlideNum =( currentNum + 1 ) % $slide.length;
            
            //スライドを徐々に非表示する
            $slide.eq( currentNum ).fadeOut();

            //次のスライドを徐々に表示する            
            $slide.eq( nextSlideNum ).fadeIn();
            
            //現在の見ている画像番号に、「次の」番号を格納する
            currentNum = nextSlideNum;
        }
    });
});
</script>
</body>
</html>

<!doctype html>

<html>

<head>

<title>スライドショーを作ってみる</title>

<style>

*{margin:0;padding:0;}

.slideShow{

position:relative;

width:320px;

height:180px;

overflow:hidden;

}

.slideShow img{

position:absolute;

left:0;

display:none;

}

</style>

</head>

<body>

</div>

$(function(){

each.～の箇所

jQueryがHTMLの中から「.slideShow」というクラスを持った

要素を探してきて、それぞれに対してこの括弧内の処理を実行する。

今回のサンプルでは「.slideShow」は一つだけなので処理は一回だけです。

$(".slideShow").each(function(){

//全てのスライド

var $slide = $(this).find("img"),

//現在のスライドを示す番号を格納

currentNum = 0;

//スライドを徐々に表示する

$slide.eq( currentNum ).fadeIn();

//2000/1000=２秒間隔で「showNextSlide」を呼び出す

setInterval( showNextSlide,2000);

function showNextSlide(){

$slide.lengthは、$slideの要素数が入っています。

今回は画像が４枚なので「４」が格納されています。

var nextSlideNum =( currentNum + 1 ) % $slide.length;

//スライドを徐々に非表示する

$slide.eq( currentNum ).fadeOut();

//次のスライドを徐々に表示する

$slide.eq( nextSlideNum ).fadeIn();

//現在の見ている画像番号に、「次の」番号を格納する

currentNum = nextSlideNum;

}

});

</script>

</body>

</html>

: jQuery

ボタンを回転させて表示する。

ブラウザの上部からぶら下がっているボタンです。スクロールが停止した後、一定時間おいて回転しながら現れるボタンを、今回作成します。使用したjQueryプラグイン 1.jquery.easing.1.3 ...

: jQuery

フォームの送信を感知する

フォームの送信ボタンがクリックされたときに発生する submitイベントの処理を設定します。Webブラウザーは、フォームの送信ボタン(type属性が「submit」あるいは、「image」inpu ...

テキストの取得・変更

他の要素を包む