jQueryでDOM要素にCSSを付けたい

Question

###実現したいこと
下記で最後にbodyに挿入する前にCSSを付けたいです。（「var html」と「var positions」は変更できないものとします。 ）

var html = `<div class="tip">tip</div>`;

var positions = {top:'0',bottom:'1',left:'2',right:'3'};

// 挿入前にCSSを付けたい
html.css({'top':positions.top,bottom:positions.bottom});

// 挿入
$('body').append( html );		

###試したこと
「html」を「$(html)」としても（つまり「DOM」を「オブジェクト」にしても）効きませんでした。

// 挿入前にCSSを付けたい
$(html).css({'top':positions.top,bottom:positions.bottom});

また、「.CSS()」でなく「.attr()」を使ってもみましたがこれも効かないようでした。

// 挿入前にCSSを付けたい
var style = `top:${positions.top};bottom:${positions.bottom};left:${positions.left};right:${positions.right}`;
$(html).attr('style',style);

最後に挿入が終わってからやったらできました。

// 挿入
$('body').append( html );
// 終わってから付与ならできた
$('.tip').css({'top':positions.top,bottom:positions.bottom});

できれば終わってからでなくて挿入前に付与したいのですが、そのようなことはできないのでしょうか？挿入後にやるしかないですか？

Answer 1

var html = `<div class="tip">tip</div>`;// これはただの文字列

var positions = {top:'0',bottom:'1',left:'2',right:'3'};

// 挿入前にCSSを付けたい
//$(html).css({'top':positions.top,bottom:positions.bottom});// 変数htmlは変更されていない
var $html = $(html).css({'top':positions.top,bottom:positions.bottom}); // jQueryオブジェクトにする（変数にちゃんと保存する）

// 挿入
//$('body').append( html ); // 変数htmlはただの文字列
$('body').append( $html );
```**動くサンプル：**[https://jsfiddle.net/kxz6n8gu/](https://jsfiddle.net/kxz6n8gu/)

Comments

[milmilmimi]

いつもお世話になっております。「$」をつけてオブジェクトにしたものに「.css()」とすれば破壊的に変化するものかと思いました。変数に代入しなければならないんですね。しかも最初のはDOMでなく文字列でしたか…。ご説明ありがとうございました。