Codelab Editor
Free Online HTML Editor
Run
Learn HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery Set HTML Example</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <style> body { font-family: sans-serif; padding: 30px; background: #f9f9f9; } #content { margin-top: 20px; padding: 10px; background: #e0f7fa; border-left: 4px solid #00acc1; } button { padding: 10px 15px; background: #00acc1; color: white; border: none; border-radius: 4px; cursor: pointer; } button:hover { background: #008b9a; } </style> </head> <body> <h1>jQuery Set HTML Content Example</h1> <p>Use <kbd>html()</kbd> to insert HTML markup inside an element.</p> <div id="content">This is the original <em>HTML</em> content.</div> <button id="setHtml">Set New HTML Content</button> <script> $(document).ready(function(){ $("#setHtml").click(function(){ $("#content").html("<strong>New HTML content</strong> with <em>emphasis</em>."); }); }); </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