Ajax 1 : 개념정리 질문있습니다.

7 글 보임 - 1 에서 7 까지 (총 7 중에서)

글쓴이

글

2022년 11월 28일 10:46 #55875

참가자

  <body>
    <div class="container">
      <div class="row">
        <!-- <div class="col-sm-4">
          < img src="https://via.placeholder.com/600" class="w-100" />
          <h5>Card title</h5>
          <p>가격 : 70000</p>
        </div> -->
      </div>
    </div>
  </body>
  <script>
    var products = [
      { id: 0, price: 70000, title: 'Blossom Dress' },
      { id: 1, price: 50000, title: 'Springfield Shirt' },
      { id: 2, price: 60000, title: 'Black Monastery' },
    ];

    let template = `<div class="col-sm-4">
      < img src="https://via.placeholder.com/600" class="w-100" />
           <h5>${products[0].title}</h5>
           <p>${products[0].price}</p>
         </div>`;
    document.querySelector('.row').append(template);



위에 html 코드 주석으로 만들고


`` 으로 감싼다음에 화면에 띄우면 

${} 로 감싼 값들은 바뀌는데 


<div class="col-sm-4"> < img src="https://via.placeholder.com/600" class="w-100" /> <h5>Blossom Dress</h5> <p>70000</p> </div>



이런식으로 html 요소가 표시가 되지 않고 문자 그대로 나타납니다 뭐가 문제일까요??

2022년 11월 28일 12:20 #55888

성경환

참가자

document.querySelector('.row').append(template);

이부분을 이렇게 

document.querySelector('.row').innerHTML = template;

바꾸니깐 정상적으로 되서 반복문으로 이런식으로 돌렸습니다.

 products.forEach((value, index) => {
        let template = `<div class="col-sm-4">
        < img src="https://via.placeholder.com/600" class="w-100" />
        <h5>${value['price']}</h5>
        <p>${value['title']}</p>
        </div>`;
        document.querySelector('.row').innerHTML = template;
      });

그랬더니 맨 마지막 값만 화면에 출력이되고 




이 외에 다른 값들이 출력이 되지 않습니다.. for문으로 반복했을때도 

똑같은 결과가 나오는데 어디가 잘못된건가요??

2022년 11월 28일 14:27 #55914

codingapple

키 마스터

문자로 만든 html넣으려면 append말고 insertAdjacentHTML 이런걸 씁시다

2022년 11월 28일 15:26 #55926

성경환

참가자

 products.forEach((value, index) => {
        let template = `<div class="col-sm-4">
        < img src="https://via.placeholder.com/600" class="w-100" />
        <h5>${value['price']}</h5>
        <p>${value['title']}</p>
        </div>`;
        document.querySelector('.row').innerHTML = template;
      });

이런식으로 innerHTML로 넣었을때 값이 들어는 가는데 


반복문으로 반복하려고 하는데 제대로 반복이 되지 않아서 바로 위 div태그까지 반복해야하는가 해서

    products.forEach((value, index) => {
        let template = `<div class='row'>
        <div class="col-sm-4">
      < img src="https://via.placeholder.com/600" class="w-100" />
      <h5>${value['price']}</h5>
      <p>${value['title']}</p>
      </div>
      </div>`;

        document.querySelector('.container').innerHTML = template;
      });

forEach,for 반복문 둘다 반복이 일어나질 않네요

2022년 11월 28일 20:33 #55975

codingapple

키 마스터

 .innerHTML말고 .insertAdjacentHTML같은거 씁시다

2022년 11월 29일 10:07 #56029

성경환

참가자

    products.forEach((value, index) => {
      let template = `<div class="col-sm-4">
    < img src="https://via.placeholder.com/600" class="w-100" />
    <h5>${value['price']}</h5>
    <p>${value['title']}</p>
    </div>`;
      let pos = document.querySelector('.container');
      pos.insertAdjacentHTML('afterbegin', template);
    });


알려주신대로 insertAdjacentHTML을 사용해서 이런식으로 코드를 짜니깐


세로로 배치가 되서 

    .container {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
      }
    </style>
  </head>
  <body>
    <div class="container" id="contain">
      <div class="row">
        <!-- <div class="col-sm-4">
            < img src="https://via.placeholder.com/600" class="w-100" />
            <h5>Card title</h5>
            <p>가격 : 70000</p>
          </div> -->
      </div>
    </div>

미리 생성된 html태그가 들어갈 자리에 display flex 로 row로 놨는데 


이렇게 미리 html css로 해놓고 자바스크립트로 값을 넣어줘도 상관없는건가요??

2022년 11월 29일 14:43 #56061

codingapple

키 마스터

.container말고 .row 안에 넣으면 가로로 배치됩니다

글쓴이

글

7 글 보임 - 1 에서 7 까지 (총 7 중에서)

답변은 로그인 후 가능합니다.

로그인

https://codingapple.com/wp-content/uploads/2019/06/logo2-3.png