JavaScript DOM 작업으로 HTML 요소 다시 쓰기


<dd> 탭에 id를 설정했기 때문에 대상의 HTML 요소를 바꾸기 위해 id 이름을 지정합니다!


index.html
 <!DOCTYPE html>
 <html lang="ja">

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
 </head>

 <body>
     <h1>JavaScript Practice</h1>
     <dl>
         <dt>今日の天気</dt>
         <dd id="weather">晴れ</dd>
     </dl>
     <script src="index.js"></script>
 </body>

 </html>

1, 요소 가져오기 및 다시 쓰기


document.getElementById("id 이름");
index.js
// DOM操作でHTMLを書き換える
let element = document.getElementById("weather");

// innnerHTMLは記述したテキストもHTMLとして認識
element.innerHTML="<span>曇り</span>";

// textContentは記述したテキストを文字列として認識
element.textContent="<span>曇り</span>";

좋은 웹페이지 즐겨찾기