jquery afterメソッドで追加したcssに新しくcssを追加する方法

Question

前提・実現したいこと

jquery　afterメソッドを使ってcssを追加
その追加したメソッドに新しくcssを追加または消去したい

試したこと

addClass,removeClassを使ってもうまく動作しない。

Comments

[yambejp]

具体的なソースと挙動の説明をしてください

[think49]

質問文がおかしいので、修正して下さい。

> jquery　afterメソッドを使ってcssを追加

after()は要素ノードを挿入するのみで「CSS」の機能はありません。

> その追加したメソッドに新しくcssを追加または消去したい

「追加したメソッド」とありますが、after()にメソッドを追加する機能はありません。

[Lhankor_Mhy]

CSSのルールをJavaScriptで変更することは、やろうと思えばできないこともないのですが、ひどく使いにくいので、addClass,removeClassを使うことをお勧めします。
「うまく動作しない」とのこと、そのコードをご提示いただければ、何かアドバイスができるかもしれません。

[mari1996]

質問がわかりにくくてすみません。

after()でDOMを追加
そのDOMにcssを追加する方法です。

Answer 1

after()でDOMを追加
そのDOMにcssを追加する方法です。

こんな感じですか？

$('body').after('<div style="color:red">hoge</div>');

Answer 2

Lhankor_Mhy さんが [修正依頼] でアドバイスされているのと同様の理由から、jQuery#css を jQuery#addClass に置き換えるとして。

after()でDOMを追加
そのDOMにcssを追加する方法です。

HTMLドキュメントに挿入前にclassを適用したノードを用意します。

<style>
.foo {
  font-weight: bold;
  color: black;
  background-color: #f99;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<p id="target">target</p>
<script>
'use strict';
jQuery("#target").after('<p class="foo">after</p>');
</script>

元からある要素ノードにclassを追加する状況なら、挿入前に jQuery#addClass() します。

const p = jQuery('<p>after</p>');
jQuery("#target").after(p.addClass('foo'));

Re: mari1996 さん

Comments

[mari1996]

皆さんありがとうございます！
解決ができました！