wiki:javascript:javascript_note:jquery_html
목차
JavaScript / jQuery HTML Elements
- description : JavaScript / jQuery HTML Elements
- author : 오션
- email : shlim@repia.com
- lastupdate : 2021-04-14
Ref
Set Text Content
HTML 요소의 내부 텍스트를 설정합니다.
jQuery
<!DOCTYPE html> <html lang="en"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> </head> <body> <h1>Setting Text Content</h1> <h2 id="01">Staria Lounge</h2> <h2 id="02">Grand Starex</h2> <script> $(document).ready(function () { var myCar = $("#01"); myCar.text("Palisade"); }); </script> </body> </html>
JavaScript
<!DOCTYPE html> <html lang="en"> <body> <h1>Setting Text Content</h1> <h2 id="01">Staria Lounge</h2> <h2 id="02">Grand Starex</h2> <script> var myCar = document.getElementById("01"); myCar.textContent = "Palisade"; </script> </body> </html>
Get Text Content
HTML 요소의 내부 텍스트를 가져옵니다.
jQuery
<!DOCTYPE html> <html lang="en"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> </head> <body> <h1>Getting Text Content</h1> <h2 id="01">A big fish in a little pond</h2> <h2 id="02">A good medicine tastes bitter</h2> <h2 id="03">No Pain, No Gain</h2> <p id="demo"></p> <script> $(document).ready(function () { var myProverb = $("#02"); var myText = myProverb.text(); $("#demo").text(myText); }) </script> </body> </html>
JavaScript
<!DOCTYPE html> <html lang="en"> <body> <h1>Getting Text Content</h1> <h2 id="01">A big fish in a little pond</h2> <h2 id="02">A good medicine tastes bitter</h2> <h2 id="03">No Pain, No Gain</h2> <p id="demo"></p> <script> var myProverb = document.getElementById("02"); var myText = myProverb.textContent || myProverb.innerText; document.getElementById("demo").innerHTML = myText; </script> </body> </html>
Set HTML Content
요소의 HTML 콘텐츠를 설정합니다.
jQuery
<!DOCTYPE html> <html lang="en"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> </head> <body> <h1>Setting HTML</h1> <div id="01"> <h2>Hello JQuery</h2> </div> <div id="02"> <h2>Welcome to Heaven!!!</h2> </div> <p id="demo"></p> <script> $(document).ready(function () { var myElement = $("#02"); myElement.html("<p>Welcome to the Hell of coding"); }); </script> </body> </html>
JavaScript
<!DOCTYPE html> <html lang="en"> <body> <h1>Setting HTML</h1> <div id="01"> <h2>Hello JQuery</h2> </div> <div id="02"> <h2>Welcome to Heaven!!!</h2> </div> <p id="demo"></p> <script> var myElement = document.getElementById("02"); myElement.innerHTML = "<p>Welcome to the Hell of coding</p>"; </script> </body> </html>
Get HTML Content
요소의 HTML 콘텐츠를 가져옵니다.
jQuery
<!DOCTYPE html> <html lang="en"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> </head> <body> <h1>Getting HTML</h1> <div id="01"> <h2>Bienvenue en France!!!</h2> </div> <div id="02"> <h2>Aurevoir les enfants!!!</h2> </div> <script> $(document).ready(function () { var content = $("#02").html(); $("#01").html(content); }); </script> </body> </html>
JavaScript
<!DOCTYPE html> <html lang="en"> <body> <h1>Getting HTML</h1> <div id="01"> <h2>Bienvenue en France!!!</h2> </div> <div id="02"> <h2>Aurevoir les enfants!!!</h2> </div> <script> var content = document.getElementById("02").innerHTML; document.getElementById("01").innerHTML = content; </script> </body> </html>
/volume1/web/dokuwiki/data/pages/wiki/javascript/javascript_note/jquery_html.txt · 마지막으로 수정됨: 2023/01/13 18:44 (바깥 편집)
별도로 명시하지 않을 경우, 이 위키의 내용은 다음 라이선스에 따라 사용할 수 있습니다: CC Attribution-Share Alike 4.0 International
