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
출력에서 볼 수 있듯이 새 텍스트는 이전 텍스트와 연결됩니다.
