> 웹 프론트엔드 > JS 튜토리얼 > 데이터 손실 없이 ``요소에 텍스트를 추가하는 방법은 무엇입니까?

데이터 손실 없이 ``요소에 텍스트를 추가하는 방법은 무엇입니까?

DDD
풀어 주다: 2024-11-15 01:04:02
원래의
785명이 탐색했습니다.

How to Append Text to a `` Element without Data Loss?

<div>에 텍스트 추가 데이터 손실 없는 요소

AJAX를 사용하여 <div> 요소의 콘텐츠를 삭제하려면 새 데이터가 기존 콘텐츠를 덮어쓰지 않도록 하는 것이 중요합니다. 이 문제에 대한 해결책은 다음과 같습니다.

var div = document.getElementById('divID');
div.innerHTML += 'Extra stuff';
로그인 후 복사

이 코드는 <div> 요소. innerHTML 속성에는 요소의 전체 HTML 콘텐츠가 포함됩니다. = 연산자를 사용하면 기존 콘텐츠를 바꾸는 대신 추가합니다.

설명:

getElementById 메소드는 <div> 지정된 ID("divID")를 가진 요소입니다. innerHTML 속성에는 해당 요소 내의 HTML 콘텐츠가 포함됩니다.

= 연산자는 innerHTML 속성 끝에 "Extra stuff"라는 문자열을 추가합니다. 이렇게 하면 기존 콘텐츠를 삭제하지 않고도 새 텍스트를 효과적으로 추가할 수 있습니다.

예:

<div> ID가 "dataDiv"인 요소:

<div>
로그인 후 복사
로그인 후 복사

JavaScript 코드를 실행하는 경우:

var div = document.getElementById('dataDiv');
div.innerHTML += 'New Data';
로그인 후 복사

<div> 요소는 다음과 같습니다.

<div>
로그인 후 복사
로그인 후 복사

이 접근 방식을 사용하면 <div> 기존 콘텐츠를 잃지 않고 새로운 데이터를 포함하는 요소입니다.

위 내용은 데이터 손실 없이 ``요소에 텍스트를 추가하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿