자바 스크립트에서 요소 ID를 어떻게 설정할 수 있습니까?

김윤
function addToDoList() {
    toDoForm.addEventListener('submit', event => {
        event.preventDefault();
        toDoArray.push(toDoInput.value);
        const li = document.createElement("li"); 
        const delButton = document.createElement("button");
        delButton.innerHTML = "X";
        const span = document.createElement("span");
        span.innerHTML = toDoInput.value;
        li.appendChild(span);
        li.appendChild(delButton);
        toDoList.appendChild(li);
        toDoInput.value = "";
    });
}

다음은 내 코드입니다. 값을 입력하면 목록에 표시됩니다. 그리고 각 목록에 ID를 부여하고 싶습니다. 어떻게 할 수 있습니까?

알렉스
  • 목록의 모든 요소를 ​​가져올 수 있습니다. document.querySelectorAll('li')
  • 그런 다음 요소를 반복하고 모든 요소에 특정 ID를 부여하십시오. 모든 요소에 고유 한 ID를 부여하려면 모든 반복에서 증가하는 지표를 사용하십시오. 그런 다음이 ID를 요소의 ID 속성에 할당합니다.

document.querySelectorAll('li').forEach((val, ind) => {
  val.id = "elem" + (ind + 1);
})

document.querySelectorAll('li').forEach((val, ind) => {
  console.log(val.id);
})
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

자바 스크립트 배열에 자바 배열 요소를 어떻게 추가 할 수 있습니까?

분류에서Dev

자바 스크립트에서 특정 자식 요소 수를 어떻게 얻습니까?

분류에서Dev

자바 스크립트에서 회전 된 요소의 너비와 높이를 어떻게 측정 할 수 있습니까?

분류에서Dev

핵심 자바 스크립트 선택에서 jquery 요소를 어떻게 얻을 수 있습니까?

분류에서Dev

혼합 자바 스크립트 2D 배열에서 숫자가 가장 큰 요소를 어떻게 선택할 수 있습니까?

분류에서Dev

스크립 렛에서 자바 스크립트 var를 어떻게 사용할 수 있습니까?

분류에서Dev

자바 스크립트, 게임, 자바 스크립트에서 부모 div와 관련된 div 요소의 위치 (x, y)를 어떻게 결정할 수 있습니까?

분류에서Dev

내 Ajax URL에서 자바 스크립트 변수를 어떻게 정의 할 수 있습니까?

분류에서Dev

자바 스크립트 : <li>와 같은 DOM 요소 내 텍스트 요소의 줄 수를 어떻게 계산할 수 있습니까?

분류에서Dev

Jade에서는 어떻게 외부 자바 스크립트에서 함수를 호출 할 수 있습니까?

분류에서Dev

이 함수를 jquery에서 순수 자바 스크립트로 어떻게 변환 할 수 있습니까?

분류에서Dev

자바 스크립트를 통해 -webkit-mask-box-image를 어떻게 설정할 수 있습니까?

분류에서Dev

자바 스크립트를 통해 -webkit-mask-box-image를 어떻게 설정할 수 있습니까?

분류에서Dev

CSS에서 자바 스크립트 변수를 어떻게 사용할 수 있습니까?

분류에서Dev

iframe 내에서 자바 스크립트 함수를 어떻게 호출 할 수 있습니까?

분류에서Dev

자바 스크립트에서 지수를 어떻게 사용할 수 있습니까?

분류에서Dev

자바 스크립트에서 데이터 행 값을 어떻게 설정할 수 있습니까?

분류에서Dev

자바 스크립트에서 양식의 입력 값을 어떻게 설정할 수 있습니까?

분류에서Dev

자바 스크립트에서 로컬 이미지를 어떻게 사용할 수 있습니까?

분류에서Dev

브라우저에서 자바 스크립트를 어떻게 편집 할 수 있습니까?

분류에서Dev

자바 스크립트에서 어떻게 var_dump를 할 수 있습니까?

분류에서Dev

내 php 문 내에서이 자바 스크립트를 어떻게 제대로 실행할 수 있습니까?

분류에서Dev

vue.js 2 템플릿에서 자바 스크립트를 어떻게 호출 할 수 있습니까?

분류에서Dev

자바 스크립트 함수를 어떻게 호출 할 수 있습니까?

분류에서Dev

fxml 요소에서 드롭 이벤트를 어떻게 사용할 수 있습니까? (자바 FX)

분류에서Dev

내 PHP 스크립트에서 찾은 이미지를 표시하기 위해 내 자바 스크립트를 어떻게 정의 할 수 있습니까?

분류에서Dev

자바 스크립트 객체를 어떻게 결합 할 수 있습니까?

분류에서Dev

자바 스크립트에서 html 요소의 이웃을 어떻게 얻을 수 있습니까?

분류에서Dev

jquery가 아닌 자바 스크립트를 사용하여 추가 한 후 요소를 어떻게 참조 할 수 있습니까?

Related 관련 기사

  1. 1

    자바 스크립트 배열에 자바 배열 요소를 어떻게 추가 할 수 있습니까?

  2. 2

    자바 스크립트에서 특정 자식 요소 수를 어떻게 얻습니까?

  3. 3

    자바 스크립트에서 회전 된 요소의 너비와 높이를 어떻게 측정 할 수 있습니까?

  4. 4

    핵심 자바 스크립트 선택에서 jquery 요소를 어떻게 얻을 수 있습니까?

  5. 5

    혼합 자바 스크립트 2D 배열에서 숫자가 가장 큰 요소를 어떻게 선택할 수 있습니까?

  6. 6

    스크립 렛에서 자바 스크립트 var를 어떻게 사용할 수 있습니까?

  7. 7

    자바 스크립트, 게임, 자바 스크립트에서 부모 div와 관련된 div 요소의 위치 (x, y)를 어떻게 결정할 수 있습니까?

  8. 8

    내 Ajax URL에서 자바 스크립트 변수를 어떻게 정의 할 수 있습니까?

  9. 9

    자바 스크립트 : <li>와 같은 DOM 요소 내 텍스트 요소의 줄 수를 어떻게 계산할 수 있습니까?

  10. 10

    Jade에서는 어떻게 외부 자바 스크립트에서 함수를 호출 할 수 있습니까?

  11. 11

    이 함수를 jquery에서 순수 자바 스크립트로 어떻게 변환 할 수 있습니까?

  12. 12

    자바 스크립트를 통해 -webkit-mask-box-image를 어떻게 설정할 수 있습니까?

  13. 13

    자바 스크립트를 통해 -webkit-mask-box-image를 어떻게 설정할 수 있습니까?

  14. 14

    CSS에서 자바 스크립트 변수를 어떻게 사용할 수 있습니까?

  15. 15

    iframe 내에서 자바 스크립트 함수를 어떻게 호출 할 수 있습니까?

  16. 16

    자바 스크립트에서 지수를 어떻게 사용할 수 있습니까?

  17. 17

    자바 스크립트에서 데이터 행 값을 어떻게 설정할 수 있습니까?

  18. 18

    자바 스크립트에서 양식의 입력 값을 어떻게 설정할 수 있습니까?

  19. 19

    자바 스크립트에서 로컬 이미지를 어떻게 사용할 수 있습니까?

  20. 20

    브라우저에서 자바 스크립트를 어떻게 편집 할 수 있습니까?

  21. 21

    자바 스크립트에서 어떻게 var_dump를 할 수 있습니까?

  22. 22

    내 php 문 내에서이 자바 스크립트를 어떻게 제대로 실행할 수 있습니까?

  23. 23

    vue.js 2 템플릿에서 자바 스크립트를 어떻게 호출 할 수 있습니까?

  24. 24

    자바 스크립트 함수를 어떻게 호출 할 수 있습니까?

  25. 25

    fxml 요소에서 드롭 이벤트를 어떻게 사용할 수 있습니까? (자바 FX)

  26. 26

    내 PHP 스크립트에서 찾은 이미지를 표시하기 위해 내 자바 스크립트를 어떻게 정의 할 수 있습니까?

  27. 27

    자바 스크립트 객체를 어떻게 결합 할 수 있습니까?

  28. 28

    자바 스크립트에서 html 요소의 이웃을 어떻게 얻을 수 있습니까?

  29. 29

    jquery가 아닌 자바 스크립트를 사용하여 추가 한 후 요소를 어떻게 참조 할 수 있습니까?

뜨겁다태그

보관