jQuery DOM操作函数速查表和在线测试

jQuery DOM manipulation 直接在线测试jQuery的各个DOM操作函数的实际效果。

jquery, 基础知识

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2022
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

$(function() {
    $('button').prop('disabled', false);

var prependNum = 1;
    $('.example-prepend button').on('click', function() {
        $('.example-prepend .target').prepend('<p>add elements #' + prependNum + '</p>');
        prependNum++;
    });

var prependToNum = 1;
    $('.example-prependTo button').on('click', function() {
        $('<p>add elements #' + prependToNum + '</p>').prependTo('.example-prependTo .target');
        prependToNum++;
    });

var appendNum = 1;
    $('.example-append button').on('click', function() {
        $('.example-append .target').append('<p>add elements #' + appendNum + '</p>');
        appendNum++;
    });

var appendToNum = 1;
    $('.example-appendTo button').on('click', function() {
        $('<p>add elements #' + appendToNum + '</p>').appendTo('.example-appendTo .target');
        appendToNum++;
    });

var beforeNum = 1;
    $('.example-before button').on('click', function() {
        $('.example-before .target').before('<p>add elements #' + beforeNum + '</p>');
        beforeNum++;
    });

var insertBeforeNum = 1;
    $('.example-insertBefore button').on('click', function() {
        $('<p>add elements #' + insertBeforeNum + '</p>').insertBefore('.example-insertBefore .target');
        insertBeforeNum++;
    });

var afterNum = 1;
    $('.example-after button').on('click', function() {
        $('.example-after .target').after('<p>add elements #' + afterNum + '</p>');
        afterNum++;
    });

var insertAfterNum = 1;
    $('.example-insertAfter button').on('click', function() {
        $('<p>add elements #' + insertAfterNum + '</p>').insertAfter('.example-insertAfter .target');
        insertAfterNum++;
    });

$('.example-wrap button').on('click', function() {
        $('.example-wrap .target p').wrap('<div style="background:#ddd;"></div>');
        $(this).prop('disabled', true);
    });

$('.example-wrapAll button').on('click', function() {
        $('.example-wrapAll .target p').wrapAll('<div style="background:#ddd;"></div>');
        $(this).prop('disabled', true);
    });

$('.example-wrapInner button').on('click', function() {
        $('.example-wrapInner .target p').wrapInner('<span style="background:#ddd;"></span>');
        $(this).prop('disabled', true);
    });

$('.example-clone button').on('click', function() {
        $('.example-clone .target p').clone().appendTo('.example-clone .target');
    });

$('.example-replaceWith button').on('click', function() {
        $('.example-replaceWith .target p').replaceWith('<p style="background:#ddd;">あのイーハトーヴォのすきとおった風</p>');
        $(this).prop('disabled', true);
    });

$('.example-replaceAll button').on('click', function() {
        $('<p style="background:#ddd;">あのイーハトーヴォのすきとおった風</p>').replaceAll('.example-replaceAll .target p');
        $(this).prop('disabled', true);
    });

$('.example-remove button').on('click', function() {
        $('.example-remove .target p').remove();
        $(this).prop('disabled', true);
    });

$('.example-empty button').on('click', function() {
        $('.example-empty .target p').empty();
        $(this).prop('disabled', true);
    });

$('.example-unwrap button').on('click', function() {
        $('.example-unwrap .target p').unwrap();
        $(this).prop('disabled', true);
    });
});

编译

CSS

HTML

<section class="example-prependTo">
    <h2>.prependTo()</h2>
    <button>.prependTo()</button>
    <div class="target">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, commodi.</p>
    </div>
</section>

<section class="example-append">
    <h2>.append()</h2>
    <button>.append()</button>
    <div class="target">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, commodi.</p>
    </div>
</section>

<section class="example-appendTo">
    <h2>.appendTo()</h2>
    <button>.appendTo()</button>
    <div class="target">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, commodi.</p>
    </div>
</section>

<section class="example-before">
    <h2>.before()</h2>
    <button>.before()</button>
    <div class="target">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, commodi.</p>
    </div>
</section>

<section class="example-insertBefore">
    <h2>.insertBefore()</h2>
    <button>.insertBefore()</button>
    <div class="target">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, commodi.</p>
    </div>
</section>

<section class="example-after">
    <h2>.after()</h2>
    <button>.after()</button>
    <div class="target">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, commodi.</p>
    </div>
</section>

<section class="example-insertAfter">
    <h2>.insertAfter()</h2>
    <button>.insertAfter()</button>
    <div class="target">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, commodi.</p>
    </div>
</section>

<section class="example-wrap">
    <h2>.wrap()</h2>
    <p>ボタンクリックで文章を背景グレーのスタイルが付いた<code>div</code>要素でそれぞれ括る動き。</p>
    <button>.wrap()</button>
    <div class="target">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, commodi.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, commodi.</p>
    </div>
</section>

<section class="example-wrapAll">
    <h2>.wrapAll()</h2>
    <p>ボタンクリックで文章全体を背景グレーのスタイルが付いた<code>div</code>要素で括る動き。</p>
    <button>.wrapAll()</button>
    <div class="target">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, commodi.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, commodi.</p>
    </div>
</section>

<section class="example-wrapInner">
    <h2>.wrapInner()</h2>
    <p>ボタンクリックで文章内を背景グレーのスタイルが付いた<code>span</code>要素で括る動き。</p>
    <button>.wrapInner()</button>
    <div class="target">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, commodi.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, commodi.</p>
    </div>
</section>

<section class="example-clone">
    <h2>.clone()</h2>
    <p>ボタンクリックで<code>.appendTo()</code>と組み合わせて文章を複製・追加する。</p>
    <button>.clone()</button>
    <div class="target">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, commodi.</p>
    </div>
</section>

<section class="example-replaceWith">
    <h2>.replaceWith()</h2>
    <p>ボタンクリックで欧文を背景グレーのスタイルが付いた日本語に置換する。</p>
    <button>.replaceWith()</button>
    <div class="target">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, commodi.</p>
    </div>
</section>

<section class="example-replaceAll">
    <h2>.replaceAll()</h2>
    <p>ボタンクリックで欧文を背景グレーのスタイルが付いた日本語に置換する。</p>
    <button>.replaceAll()</button>
    <div class="target">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, commodi.</p>
    </div>
</section>

<section class="example-remove">
    <h2>.remove()</h2>
    <p>以下はデフォルトで<code>p</code>要素にグレー背景を指定しており、ボタンクリックで<code>p</code>要素が削除されるので背景カラーも表示されなくなる。</p>
    <button>.remove()</button>
    <div class="target">
        <p style="background:#ddd; padding:10px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, commodi.</p>
    </div>
</section>

<section class="example-empty">
    <h2>.empty()</h2>
    <p>以下はデフォルトで<code>p</code>要素のグレー背景を指定しており、ボタンクリックで<code>p</code>要素内はそのままで子要素が削除されるので背景カラーは表示されたままになる。</p>
    <button>.empty()</button>
    <div class="target">
        <p style="background:#ddd; padding:10px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, commodi.</p>
    </div>
</section>

<section class="example-unwrap">
    <h2>.unwrap()</h2>
    <p>以下はデフォルトでグレー背景を指定した<code>div</code>で文章が括られており、ボタンクリックでその<code>div</code>が削除されるので背景カラーも表示されなくなる。</p>
    <button>.unwrap()</button>
    <div class="target">
        <div style="background:#ddd;">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, commodi.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, commodi.</p>
        </div>
    </div>
</section>

jQuery DOM manipulation 直接在线测试jQuery的各个DOM操作函数的实际效果。

jquery, 基础知识

编辑器支持Emmet

快捷键

jQuery DOM manipulation 直接在线测试jQuery的各个DOM操作函数的实际效果。

jquery, 基础知识

使用jQuery Mobile实现的数字时钟

CSS3+jQuery 模拟Mac OS窗口

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：