Try It Editor
Tip: Press
Ctrl/⌘ + Enter
to Run
▶ Run
Reset
Copy
Download
Code
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>html() / text() / val()</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <style>#out{border:1px solid #ccc;padding:6px;margin-top:6px}</style> </head> <body> <div id="out"><b>Hello</b> <i>world</i></div> <input id="inp" placeholder="Type here"> <p> <button id="getHtml">get html()</button> <button id="setHtml">set html()</button> <button id="getText">get text()</button> <button id="setText">set text()</button> <button id="getVal">get val()</button> <button id="setVal">set val()</button> </p> <pre id="log"></pre> <script> $("#getHtml").on("click", function(){ $("#log").text($("#out").html()); }); $("#setHtml").on("click", function(){ $("#out").html("<u>Replaced with HTML</u>"); }); $("#getText").on("click", function(){ $("#log").text($("#out").text()); }); $("#setText").on("click", function(){ $("#out").text("<u>Now plain text, tags are shown</u>"); }); $("#getVal").on("click", function(){ $("#log").text($("#inp").val()); }); $("#setVal").on("click", function(){ $("#inp").val("Sonu ✨"); }); </script> </body> </html>
Output