JavaScript 변경 텍스트

Ammar Ali 2023년1월30일
  1. JavaScript에서textContent속성을 사용하여 요소의 텍스트 변경
  2. JavaScript에서createTextNode()함수를 사용하여 요소의 텍스트 변경
JavaScript 변경 텍스트

이 자습서에서는 JavaScript에서textContent속성 및createTextNode()함수를 사용하여 요소의 텍스트를 변경하는 방법에 대해 설명합니다.

JavaScript에서textContent속성을 사용하여 요소의 텍스트 변경

요소의 이전 텍스트를 새 텍스트로 바꾸려면 해당 ID 또는 클래스 이름을 사용하여 해당 요소를 가져온 다음textContent속성을 사용하여 이전 텍스트를 새 텍스트로 바꿀 수 있습니다. ID 또는 클래스 이름이 지정되지 않은 경우id또는class속성을 사용하여 요소에 ID 또는 클래스 이름을 제공 할 수 있습니다. ID 또는 클래스 이름이 고유한지 확인하십시오. 그렇지 않으면 동일한 ID를 가진 요소도 변경됩니다. 예를 들어span태그를 사용하여 텍스트 요소를 만들고 JavaScript의textContent함수를 사용하여 텍스트를 변경해 보겠습니다. 아래 코드를 참조하십시오.

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <span id="SpanID"> Old Text </span>
    <script type="text/javascript">
        document.getElementById("SpanID").textContent="New Text";
    </script>
</body>
</html>

출력:

New Text

JavaScript 코드는 위의 코드에서 HTML 파일 내에 배치되지만 원하는 경우 분리 할 수 ​​있습니다. 버튼을 클릭하여 텍스트를 변경해야하는 조건을 지정할 수도 있습니다. 텍스트를 바꾸지 않고 새 텍스트를 이전 텍스트로 추가하려면 아래 방법을 사용할 수 있습니다.

JavaScript에서createTextNode()함수를 사용하여 요소의 텍스트 변경

이전 텍스트와 함께 새 텍스트를 추가하려면 해당 ID 또는 클래스 이름을 사용하여 해당 요소를 가져온 다음createTextNode()함수를 사용하여 새 텍스트의 노드를 만들고appendChild를 사용하여()함수는 이전 텍스트와 함께 새 텍스트를 추가 할 수 있습니다. ID 또는 클래스 이름이 지정되지 않은 경우id또는class속성을 사용하여 요소에 ID 또는 클래스 이름을 제공 할 수 있습니다. ID 또는 클래스 이름이 고유한지 확인하십시오. 그렇지 않으면 동일한 ID를 가진 요소도 변경됩니다. 예를 들어span태그를 사용하여 텍스트 요소를 만들고 JavaScript에서createTextNode()함수를 사용하여 해당 텍스트를 추가해 보겠습니다. 아래 코드를 참조하십시오.

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <span id="SpanID"> Old Text </span>
    <script type="text/javascript">
        Myspan = document.getElementById("SpanID");
        Mytxt = document.createTextNode("New text");
        Myspan.appendChild(Mytxt);
    </script>
</body>
</html>

출력:

Old Text New Text

출력에서 볼 수 있듯이 새 텍스트는 이전 텍스트와 연결됩니다.

작가: Ammar Ali
Ammar Ali avatar Ammar Ali avatar

Hello! I am Ammar Ali, a programmer here to learn from experience, people, and docs, and create interesting and useful programming content. I mostly create content about Python, Matlab, and Microcontrollers like Arduino and PIC.

LinkedIn Facebook

관련 문장 - JavaScript Text