[Array] JS - push() 메서드 ★ - 배열 뒤에(=끝에) 배열요소 추가 후, 배열길이(=배열요소개수) 반환 (= push메서드 = 푸시메서드)

목차

1. array.push() 예제 - 배열 뒤에 요소 추가 후, 바뀐 배열 출력
2. array.push() 정의
3. array.push() 구문
4. array.push() 예제 - 요소 2개 추가 후, 배열 개수 반환
5. array.push() 예제 - 리스트태그의 내용으로 배열 생성

array.push() 예제 - 배열 뒤에 요소 추가 후, 바뀐 배열 출력

 

<button onclick="hz()">클릭</button>

<p id="demo"></p>

<script>

var web = ["HTML", "CSS", "JS"];

document.getElementById("demo").innerHTML = web;

function hz() {

  web.push("PHP" , "SQL");

  document.getElementById("demo").innerHTML = web;

}

</script>

 

결과값: HTML,CSS,JS,PHP,SQL

array.push() 정의

 

배열 끝에 새 배열값 추가 후, 바뀐 배열길이 (= 배열개수 length) 반환.

 

---

 

1.
원래 배열의 길이 (= 배열개수 = length 값) 변경.

 

2. cf.
unshift() 메서드 - 배열 시작 부분에 배열값 추가.

 

3.

• ECMAScript 1
• 모든 브라우저 지원.

 

4. MDN push() 예제보기

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push

 

array.push() 구문

 

array.push(item1, item2, ..., itemX)

 

---

[매개변수]

item1, item2, ..., itemX
필수. 배열에 추가할 배열값

 

---

[반환값]

새 배열길이 (= 새 배열개수 = 새로운 length 값) 반환.

 

array.push() 예제 - 요소 2개 추가 후, 배열 개수 반환

 

<button onclick="hz()">클릭</button>

<p id="demo"></p>

<script>

var web = ["HTML", "CSS", "JS"];

document.getElementById("demo").innerHTML = web;

function hz() {

  x = web.push("PHP" , "SQL");

  alert(x); // 5

  document.getElementById("demo").innerHTML = web;

}

</script>

 

결과보기

결과값: 5 얼럿창 뜬 후, HTML,CSS,JS,PHP,SQL

관련예제: 균이 님 (190909) https://sir.kr/qa/322639

array.push() 예제 - 리스트태그의 내용으로 배열 생성

[순수 JavaScript 코드]

 

<ul id="hz">

    <li>1</li>

    <li>2</li>

    <li>3</li>

</ul>

 

<script>

var arr = [];

var liElements = document.querySelectorAll('#hz li');

liElements.forEach(function(li) {

  arr.push(li.textContent);

});

console.log(arr); // // [object Array] (3) ["1","2","3"]

</script>

 

결과보기

---

[jQuery 코드]

 

<script src="https://code.jquery.com/jquery-latest.js"></script>

<ul id="hz">

    <li>1</li>

    <li>2</li>

    <li>3</li>

</ul>

 

<script>

var arr=[];

$('#hz li').each(function(){

      arr.push( $(this).text() );

});

console.log(arr);

</script>

 

결과보기 

균이 님 (230509) https://sir.kr/qa/498675 답변 참고