자바스크립트 내부대체가 아닌 HTML 추가

자바스크립트 내부대체가 아닌 HTML 추가

빠른 질문, 나는 우리가 그 내용을 바꿀 수 있다는 것을 안다.

<div id="whatEverId">hello one<div>사용방법:

document.getElementById("whatEverId").innerHTML="hello two";

이제 div를 교체하는 대신 div를 추가할 수 있는 방법은 없나요?그래서 나는 얻을 수 있다.

<div id="whatEverId">hello one hello two<div>

(물론 비슷한 것을 사용)

<div id="whatever">hello one</div>
<script>
document.getElementById("whatever").innerHTML += " hello two";
</script>

를 사용하는 것에 주의해 주세요.element.innerHTML += 'content'비울 것이다input및textarea를 디폴트 공백상태로 하고 체크박스를 끄고 해당 요소에 연결된 이벤트(예:onclick,on hover(등) 전체는innerHTML브라우저에 의해 재해석될 수 있습니다. 즉,.innerHTML빈칸으로 다시 채워집니다.

상태를 유지해야 할 경우 새 요소를 생성해야 합니다(a).<span>예를 들어, 다음과 같이 현재 요소에 추가합니다.

let newElement = 'span'
newElement.innerHTML = 'new text'
document.getElementById('oldElement').appendChild(newElement)

document.getElementById("whatEverId").innerHTML =  document.getElementById("whatEverId").innerHTML +  "hello two" + document.getElementById("whatEverId").innerHTM ;

jcomeau_ictx가 제안한 것은 내부 편집의 비효율적인 방법입니다.HTML. Ben Cherry의 PPT를 확인해 주세요.http://www.bcherry.net/talks/js-better-faster

올바른 방법은 요소를 분리하고 변경한 후 부모 노드에 다시 추가하는 것입니다.요소를 분리하려면 이 gist에서 https://gist.github.com/cowboy/938767 Native javascript를 사용합니다.

=을(를) +=로 변경할 수 있습니다.

document.getElementById("WhatEverId")입니다.innerHTML += '헬로 투';

프리픽스인 경우

document.getElementById("WhatEverId")입니다.innerHTML = 'hello two' + document.getElementById("whatEverId")입니다.innerHTML;

jQuery 또는 MoTools javascript 라이브러리/프레임워크를 사용하는 것이 좋습니다.텍스트 노드뿐만 아니라 태그를 추가할 경우 DOM createElement 또는 앞서 언급한 라이브러리/프레임워크 중 하나를 사용해야 합니다.

이렇게 div string을 붙여서 할 수 있어요.

document.getElementById('div_id').innerHTML += '헬로 투';

언급URL : https://stackoverflow.com/questions/6594014/javascript-innerhtml-adding-instead-of-replacing