목차

JavaScript / jQuery HTML Elements

  • description : JavaScript / jQuery HTML Elements
  • author : 오션
  • email : shlim@repia.com
  • lastupdate : 2021-04-14


Ref

JavaScript / jQuery HTML Elements

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>
, , , ,