JSFiddle - React, Tailwind, and code Playground

by jasonhsu

HTML

<div id="Message">
    <p id="color">Hello JQuery</p>
</div>

CSS

.Yellow{color:Yellow;}
.Red{color:red;}

JavaScript

// 使用 jQuery 或 $ 意思相同

// 動態增加 css
$("#color").addClass("Red Yellow");

// 動態增加按鈕元件與按鈕屬性
jQuery('<button ></button>',{
    name: 'btnRed',
    text:'Add/Remove Red'
})
    .appendTo("#Message") // 將按鈕附加至 id 為 Message 的元件內
    .click(function(){ // 按鈕綁定 click 事件
           $("#color").toggleClass("Red"); // 動態新增/移除 css
    });

// 動態增加按鈕元件與按鈕屬性
$("<button></button>",{
    name:'btnBlue',
    text:'Add/Remove Yellow'
})
    .appendTo("#Message") // 將按鈕附加至 id 為 Message 的元件內
    .click(function(){ // 按鈕綁定 click 事件
           $("#color").toggleClass("Yellow"); // 動態新增/移除 css
    });