如何在jquery中引用新添加的元素並設置CSS樣式

Question

jQuery用於操作DOM的方法（例如append（）/ after（））均使用此關鍵字返回，這些關鍵字引用原始jQuery對象以進行鏈接。

var $test=$("#test").after("<div>test</div>");
$test.css("color","red");

它將#test元素的字體顏色發送為紅色，而不是新創建的元素。

現在說我想立即將新創建的元素“ test”存儲到與原始DOM方式相同的變量中。

var test=document.createElement("div");  

因此，稍后我可以使用以下方式設置css樣式：

test.style.color="red";

當然，我可以將DOM和jQuery混合使用：

var test=document.createElement("div"); 
test.innerHTML="just a test";
$(#test).after(test);
$(test).css("color","red");

但是還有其他方法嗎？

Answer 1

您可以選擇使用.insertAfter()代替.insertAfter() .after() ，因為這將返回您剛剛創建的元素：

var $test = $("<div>test</div>").insertAfter("#test");

$test.css("color","red");

您也可以在同一行上執行此操作：

var $test = $("<div>test</div>").insertAfter("#test").css("color","red");

其他選項：

var $test = $("<div style='color:red'>test</div>").insertAfter("#test");

var $test = $("<div>",{ style:"color:red",html:"test"}).insertAfter("#test");