집 > 기사 > 웹 프론트엔드 > js에서 html 요소의 내용을 수정하는 방법은 무엇입니까? 콘텐츠를 수정하기 위한 HTML DOM 구현

js에서 html 요소의 내용을 수정하는 방법은 무엇입니까? 콘텐츠를 수정하기 위한 HTML DOM 구현

青灯夜游원래의: 2018-10-09 09:54:3018788검색

js에서 html 요소의 내용을 수정하는 방법은 무엇인가요? 이 장에서는 HTML DOM을 사용하여 js의 html 요소 내용을 수정하는 방법을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

먼저 이해해야 합니다. HTML DOM이란 무엇인가요? HTML DOM의 역할은 무엇입니까?

HTML DOM은 Document Object Model(Document Object Model)의 약자로, 웹 페이지가 로드되면 브라우저가 페이지의 문서 개체 모델을 생성합니다.

HTML DOM 모델은 객체의 트리 로 구성할 수 있습니다. 아래와 같이

js에서 html 요소의 내용을 수정하는 방법은 무엇입니까? 콘텐츠를 수정하기 위한 HTML DOM 구현

HTML DOM을 통해 JavaScript HTML 문서의 모든 요소에 접근할 수 있으며, 동적 HTML을 생성할 수 있는 충분한 기능을 얻을 수 있습니다. HTML DOM을 통해 JavaScript는 다음 기능을 수행할 수 있습니다.

js는 페이지의 모든 HTML 요소를 수정할 수 있습니다.
Node.js는 페이지의 모든 HTML 속성을 수정할 수 있습니다.
Node.js는 페이지의 모든 CSS 스타일을 수정할 수 있습니다.
Node.js는 페이지의 모든 이벤트에 반응할 수 있습니다.

js가 HTML DOM을 통해 html 요소의 내용을 수정하는 방법을 자세히 소개하겠습니다. :

1. HTML 콘텐츠 추가

js는 동적 HTML 콘텐츠를 생성하고 추가할 수 있습니다. write() 메서드를 사용하면 HTML 표현식이나 JavaScript 코드를 HTML 문서에 직접 작성할 수 있습니다.

write() 메소드에는 여러 매개변수(exp1, exp2, exp3,...)가 나열될 수 있으며, 순서대로 문서에 추가됩니다.

Syntax:

document.write(exp1,exp2,exp3,....)

Description:

DOM 표준에 따르면 write() 메소드는 단일 문자열만 매개변수로 허용합니다. 그러나 write()는 원하는 수의 매개변수를 허용할 수 있습니다.

우리는 일반적으로 다음 두 가지 방법으로 write() 메소드를 사용합니다:

1 이 메소드를 사용하여 문서에 HTML을 출력합니다

2 , 이 메서드가 호출되는 창 이외의 창이나 프레임에서 새 문서를 생성합니다. 참고: 이 방법에서는 close() 메서드를 사용하여 문서를 닫아야 합니다.

예:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script type="text/javascript">
			document.write("<p>Hello World!</p> ","现在是：",Date());
		</script>
	</head>
</html>

렌더링:

js에서 html 요소의 내용을 수정하는 방법은 무엇입니까? 콘텐츠를 수정하기 위한 HTML DOM 구현

2, js 수정 바꾸기 html 요소의 내용

js에서 html 요소의 내용을 수정하고 바꾸는 가장 간단하고 직접적인 방법은 innerHTML 속성을 사용하는 것입니다.

Syntax:

document.getElementById(id).innerHTML=new HTML

document.getElementById(id)는 수정하고 ID로 바꿔야 하는 HTML 요소를 찾아 얻은 다음 innerHTML 속성을 사용하여 대체된 html 요소의 내용을 수정합니다.

예(

요소의 내용 변경):

<!DOCTYPE html>
<html>
<body>

<h1 id="header">Old Header</h1>

<script>
var element=document.getElementById("header");
element.innerHTML="New Header";
</script>

<p>"Old Header" 已被修改为 "New Header"。</p>

</body>
</html>

렌더링:

js에서 html 요소의 내용을 수정하는 방법은 무엇입니까? 콘텐츠를 수정하기 위한 HTML DOM 구현

# 🎜🎜#지침:

예제의 HTML 문서에는 id="header"인

요소가 포함되어 있습니다.

우리는 HTML DOM을 사용하여 ID를 찾습니다. = "header"의

요소는 innerHTML 속성을 사용하여 html 요소

의 모든 내용을 대체할 수 있습니다.

요약: 위 내용은 이 글의 전체 내용이며, 모든 분들의 공부에 도움이 되길 바랍니다. 더 많은 관련 튜토리얼을 보려면

JavaScript 비디오 튜토리얼

을 방문하세요!

js에서 html 요소의 내용을 수정하는 방법은 무엇입니까? 콘텐츠를 수정하기 위한 HTML DOM 구현

요소의 내용 변경):
<!DOCTYPE html> <html> <body> <h1 id="header">Old Header</h1> <script> var element=document.getElementById("header"); element.innerHTML="New Header"; </script> <p>"Old Header" 已被修改为 "New Header"。</p> </body> </html>

요소가 포함되어 있습니다.

요소는 innerHTML 속성을 사용하여 html 요소

의 모든 내용을 대체할 수 있습니다.

관련 기사

js에서 html 요소의 내용을 수정하는 방법은 무엇입니까? 콘텐츠를 수정하기 위한 HTML DOM 구현

요소의 내용 변경): <!DOCTYPE html> <html> <body> <h1 id="header">Old Header</h1> <script> var element=document.getElementById("header"); element.innerHTML="New Header"; </script> <p>"Old Header" 已被修改为 "New Header"。</p> </body> </html>

요소가 포함되어 있습니다.

요소는 innerHTML 속성을 사용하여 html 요소

의 모든 내용을 대체할 수 있습니다.

관련 기사

요소의 내용 변경):
<!DOCTYPE html> <html> <body> <h1 id="header">Old Header</h1> <script> var element=document.getElementById("header"); element.innerHTML="New Header"; </script> <p>"Old Header" 已被修改为 "New Header"。</p> </body> </html>