JavaScript에서의 작업

index.html

<!DOCTYPE html>
<html>
  <head>
    <title><ToDo-js></ToDo-js></title>
    <meta charset="UTF-8" />
    <script src="src/index.js"></script>
  </head>

  <body>
    <div class="input-area">
      <input id="add-text" placeholder="ToDoを入力" />
      <button id="add-button">追加</button>
    </div>
    <div class="incomplete-area">
      <p class="title">未完了のToDo</p>
      <ul>
        <li>
          <div class="list-row">
            <p class="todo-name">ToDoです</p>
            <button>完了</button>
            <button>削除</button>
          </div>
        </li>
        <li>
          <div class="list-row">
            <p class="todo-name">ToDoです</p>
            <button>完了</button>
            <button>削除</button>
          </div>
        </li>
      </ul>
    </div>
    <div class="complete-area">
      <p class="title">完了したToDo</p>
      <ul>
        <li>
          <div class="list-row">
            <p class="todo-name">ToDoでした</p>
            <button>戻す</button>
          </div>
        </li>
      </ul>
    </div>
  </body>
</html>

createElement
className
↓document.createElement("div"); div를 생성합니다.
↓ 클래스 이름은 div.class Name에 부여됩니다.
index.js

  const div = document.createElement("div");
  div.className = "list-row";
  console.log(div);

innerText
↓ p.innerText를 통해 요소 내의 재현 텍스트 가져오기
index.js

  const p = document.createElement("p");
  p.className = "todo-name";
  p.innerText = inputText;
  console.log(p);

appendChild
↓div.appendChild(p); 에서 p를 div의 하위 요소로 설정합니다.
index.js

  div.appendChild(p);
  console.log(div);

parentNode
removeChild
↓parentNode를 통해 부요소·부노드를 획득한다.
↓removeChild에서 특정 하위 요소(하위 노드)를 삭제합니다.
index.js

const deleteButton = document.createElement("button");
  deleteButton.innerText = "削除";
  deleteButton.addEventListener("click", () => {
    //押された削除ボタンの親（div）を未完了リストから削除
    const deleteTarget = deleteButton.parentNode;
    document.getElementById("incomplete-list").removeChild(deleteTarget);
  });

firstElementChild
↓const addTarget = completeButton.parentNode; 에서 완료 버튼의 부모 요소(div)를 가져옵니다.
↓const text = addTarget.firstElementChild.innerText; 에서 div의 첫 번째 하위 요소를 가져옵니다.
index.js

  const completeButton = document.createElement("button");
  completeButton.innerText = "完了";
  completeButton.addEventListener("click", () => {
    //完了リストに追加する要素
    const addTarget = completeButton.parentNode;
    const text = addTarget.firstElementChild.innerText;
    console.log(text);
  }

Reference

이 문제에 관하여(JavaScript에서의 유틸리티 작업), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/yait/items/1df8976870a9f5954ad6

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

JavaScript에서의 유틸리티 작업

JavaScript에서의 작업

Reference

좋은 웹페이지 즐겨찾기