Codelab Editor
Free Online HTML Editor
Run
Learn jQuery
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery end() Example</title> <style> .box { background: #e2e8f0; border: 2px solid transparent; padding: 20px; margin-bottom: 20px; } .highlight { background: #f6ad5533; } .inner { font-weight: bold; } button { padding: 8px 16px; cursor: pointer; } </style> </head> <body> <div id="demoBox" class="box"> Outer Box <div class="inner">Inner Text</div> </div> <button id="runChain">Run Chain</button> <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <script> $(function() { $('#runChain').click(function() { $('#demoBox') .addClass('highlight') // Applies to #demoBox .find('.inner') // Switch context to inner element .text('Updated Text') // Changes inner text .css('color', 'red') // Styles inner element .end() // Returns to #demoBox .css('border-color', '#38b2ac') // Styles #demoBox again .slideUp(300) // Animates #demoBox .slideDown(300); // Reveals #demoBox again }); }); </script> </body> </html>
Editor Commands
Ctrl
F
Find
Ctrl
G
Find Next
Ctrl
⇧
G
Find Previous
Ctrl
⇧
F
Find & Replace
Ctrl
]
Indent Code Right
Ctrl
[
Indent Code Left
⇧
Tab
Auto Indent Code
Ctrl
/
Line Comment
Ctrl
Alt
/
Block Comment
TutsInsider Actions
Alt
S
Run Code
Ctrl
C
Copy Editor Code
Ctrl
A
Select All Editor Code
Ctrl
S
Save/Download
Ctrl
Alt
X
Rotate
Ctrl
Alt
T
Switch Theme
Ctrl
⇧
C
Open Console
Esc
Close Console