문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
======JavaScript / jQuery HTML Elements======
<WRAP left notice 80%>
  * description : JavaScript / jQuery HTML Elements
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-04-14
</WRAP>
<WRAP clear></WRAP>
\\
====Ref====
[[https://www.w3schools.com/js/js_jquery_elements.asp|JavaScript / jQuery HTML Elements]]
\\

=====Set Text Content=====
%%HTML%% 요소의 내부 텍스트를 설정합니다.
====jQuery====
<code 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>
</code>

====JavaScript====
<code 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>
</code>

=====Get Text Content=====
%%HTML%% 요소의 내부 텍스트를 가져옵니다.\\
====jQuery====
<code 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>
</code>

====JavaScript====
<code 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>
</code>

=====Set HTML Content=====
요소의 %%HTML%% 콘텐츠를 설정합니다.\\
====jQuery====
<code 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>
</code>

====JavaScript====
<code 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>
</code>

=====Get HTML Content=====
요소의 %%HTML%% 콘텐츠를 가져옵니다.\\
====jQuery====
<code 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>
</code>

====JavaScript====
<code 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>
</code>





{{tag>오션 JavaScript jQuery HTML Elements}}
문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

문서 도구
