LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

.prepend()

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, commodi.

.prependTo()

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, commodi.

.append()

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, commodi.

.appendTo()

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, commodi.

.before()

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, commodi.

.insertBefore()

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, commodi.

.after()

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, commodi.

.insertAfter()

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, commodi.

.wrap()

ボタンクリックで文章を背景グレーのスタイルが付いたdiv要素でそれぞれ括る動き。

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, commodi.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, commodi.

.wrapAll()

ボタンクリックで文章全体を背景グレーのスタイルが付いたdiv要素で括る動き。

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, commodi.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, commodi.

.wrapInner()

ボタンクリックで文章内を背景グレーのスタイルが付いたspan要素で括る動き。

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, commodi.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, commodi.

.clone()

ボタンクリックで.appendTo()と組み合わせて文章を複製・追加する。

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, commodi.

.replaceWith()

ボタンクリックで欧文を背景グレーのスタイルが付いた日本語に置換する。

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, commodi.

.replaceAll()

ボタンクリックで欧文を背景グレーのスタイルが付いた日本語に置換する。

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, commodi.

.remove()

以下はデフォルトでp要素にグレー背景を指定しており、ボタンクリックでp要素が削除されるので背景カラーも表示されなくなる。

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, commodi.

.empty()

以下はデフォルトでp要素のグレー背景を指定しており、ボタンクリックでp要素内はそのままで子要素が削除されるので背景カラーは表示されたままになる。

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, commodi.

.unwrap()

以下はデフォルトでグレー背景を指定したdivで文章が括られており、ボタンクリックでそのdivが削除されるので背景カラーも表示されなくなる。

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, commodi.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, commodi.

CSS
  body {
    margin: 3em 3em 4em;
    font-family: 'Lato', sans-serif;
  }
  section:not(:first-child) {
    margin-top: 5em;
    padding-top: 3em;
    border-top: 1px solid #ddd;
  }
  h2 + p {
    max-width: 660px;
  }
  code {
    margin: 0 .25em;
    padding: .2em .7em;
    background: #eee;
  }
  button {
    margin-bottom: 3em;
    padding: .8em 1em;
    background: #222;
    border: none;
    color: #fff;
    font: 400 15px/1 'Lato', sans-serif;
    cursor: pointer;
  }
  button:not([disabled]):hover {
    opacity: .7;
  }
  button[disabled] {
    background: #aaa;
    cursor: not-allowed;
  }
  .target {
    max-width: 600px;
    padding: 1em 2em;
    border: 1px solid #ddd;
  }
JS
$(function() {
  $('button').prop('disabled', false);

  var prependNum = 1;
  $('.example-prepend button').on('click', function() {
    $('.example-prepend .target').prepend('

add elements #' + prependNum + '

'); prependNum++; }); var prependToNum = 1; $('.example-prependTo button').on('click', function() { $('

add elements #' + prependToNum + '

').prependTo('.example-prependTo .target'); prependToNum++; }); var appendNum = 1; $('.example-append button').on('click', function() { $('.example-append .target').append('

add elements #' + appendNum + '

'); appendNum++; }); var appendToNum = 1; $('.example-appendTo button').on('click', function() { $('

add elements #' + appendToNum + '

').appendTo('.example-appendTo .target'); appendToNum++; }); var beforeNum = 1; $('.example-before button').on('click', function() { $('.example-before .target').before('

add elements #' + beforeNum + '

'); beforeNum++; }); var insertBeforeNum = 1; $('.example-insertBefore button').on('click', function() { $('

add elements #' + insertBeforeNum + '

').insertBefore('.example-insertBefore .target'); insertBeforeNum++; }); var afterNum = 1; $('.example-after button').on('click', function() { $('.example-after .target').after('

add elements #' + afterNum + '

'); afterNum++; }); var insertAfterNum = 1; $('.example-insertAfter button').on('click', function() { $('

add elements #' + insertAfterNum + '

').insertAfter('.example-insertAfter .target'); insertAfterNum++; }); $('.example-wrap button').on('click', function() { $('.example-wrap .target p').wrap('
'); $(this).prop('disabled', true); }); $('.example-wrapAll button').on('click', function() { $('.example-wrapAll .target p').wrapAll('
'); $(this).prop('disabled', true); }); $('.example-wrapInner button').on('click', function() { $('.example-wrapInner .target p').wrapInner(''); $(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('

あのイーハトーヴォのすきとおった風

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

あのイーハトーヴォのすきとおった風

').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); }); });

Description

Article - https://www.nxworld.net/tips/jquery-dom-manipulation.html
Term
Wed, 12/06/2017 - 19:44

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv