JavaScript는 div 콘텐츠를 수정합니다.

프런트 엔드 개발에서는 특히 div 요소의 콘텐츠를 수정하기 위해 JavaScript를 사용하여 페이지의 콘텐츠를 수정해야 하는 경우가 많습니다. 이 기사에서는 JavaScript를 사용하여 div 요소의 내용을 수정하는 방법을 소개합니다.

1. innerHTML 속성을 통해 HTML 콘텐츠를 반환하거나 설정하려면

innerHTML 속성을 수정하세요. innerHTML 속성을 수정하면 div 요소의 내용을 변경할 수 있습니다. 예:

<div id="myDiv">原始内容</div>

<button onclick="change()">点击修改内容</button>

<script>
function change(){
    document.getElementById("myDiv").innerHTML = "修改后的内容";
}
</script>

버튼을 클릭하면 div의 콘텐츠가 "수정된 콘텐츠"로 수정됩니다.

innerHTML 속성은 모든 HTML 태그와 속성을 설정할 수 있다는 점에 유의해야 합니다. 예:

<div id="myDiv">原始内容</div>

<button onclick="change()">点击修改内容</button>

<script>
function change(){
    document.getElementById("myDiv").innerHTML = "<p style='color: red;'>修改后的内容</p>";
}
</script>

이 예에서는 div의 콘텐츠를 빨간색 단락 태그로 변경합니다.

2. textContent 속성을 통해 수정

div 요소의 텍스트 내용만 수정하려면 textContent 속성을 사용할 수 있습니다. textContent 속성은 HTML 태그와 속성이 무시되는 현재 요소의 텍스트 콘텐츠를 반환하거나 설정합니다. 예:

<div id="myDiv">原始内容</div>

<button onclick="change()">点击修改内容</button>

<script>
function change(){
    document.getElementById("myDiv").textContent = "修改后的文本内容";
}
</script>

버튼을 클릭하면 div의 콘텐츠가 "수정된 텍스트 콘텐츠"로 수정됩니다.

3. createElement 및 AppendChild 메소드를 통해 수정

createElement 및 AppendChild는 새 HTML 요소를 생성하고 삽입하는 데 일반적으로 사용되는 두 가지 DOM 메소드입니다. 이 두 가지 방법을 통해 div 요소의 내용을 수정할 수 있습니다.

예를 들어 먼저 새 p 태그를 만든 다음 이를 div 요소에 추가할 수 있습니다. 코드는 다음과 같습니다:

<div id="myDiv">原始内容</div>

<button onclick="change()">点击修改内容</button>

<script>
function change(){
    var newP = document.createElement("p");
    var newText = document.createTextNode("修改后的内容");
    newP.appendChild(newText);
    document.getElementById("myDiv").appendChild(newP);
}
</script>

버튼을 클릭하면 div에 "수정된 콘텐츠" 콘텐츠가 포함된 새 p 태그가 생성됩니다.

createElement 및appendChild 메소드를 통해 추가된 새로운 요소는 원본 콘텐츠를 기반으로 새로 추가된다는 점에 유의하세요. 원본 콘텐츠를 교체해야 하는 경우 innerHTML 또는 textContent 속성을 사용할 수 있습니다.

요약하자면 JavaScript를 사용하여 div 요소의 내용을 수정하는 것은 필요에 따라 다양한 작동 방법을 선택할 수 있다는 점입니다. JavaScript에 대한 더 많은 콘텐츠를 보려면 내 블로그를 계속 팔로우하세요!

위 내용은 JavaScript는 div 콘텐츠를 수정합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!