하고 싶은 일

javascript에서 html 요소를 추가할 때 [한눈에 알 수 있도록] 쓰고 싶다.

추가할 내용

li 요소 중에는 div, input, a, 3개의 요소가 넣어
ul 요소 안에 li 요소를 넣습니다.

이미지는 이런 느낌
li << (div, input, a)
ul << li

한눈에 아는 것은?

javascript 파일에서 마치 html 파일을 보는 것 같은 코드.

실제 자바 스크립트 코드

기본 방침

문장의 +로 연결하면서 들여 쓰기처럼 쓴다

변수 이외를 문자열로 작성

변수는 취급이 어색하기 때문에 나중에 .find를 사용하여 넣는다

groups.js

  function appendSeacrhList(name, id){
    $(
      '<li class="box">' +
        '<div class="searched_user"></div>' +
        '<input type="hidden" class="user_id" name="" value="">' +
        '<a href="javascript:void(0)" class="add_button">追加</a>' +
      '</li>'
    )
    .find('.searched_user').text(name).end()
    .find('.user_id').val(id).end()
    .appendTo(searched_user_list)
  };

이 부분에 변수 name 과 id 를 포함합니다.

groups.js

.find('.searched_user').text(name).end()
.find('.user_id').val(id).end()

※ 참고로

위의 .end()가 엄청 소중합니다..find('.searched_user') 한 시점에서 <div class="searched_user"></div> 라는 객체만 가져오는 형태로 되어 있습니다..end() 로 되돌아가서 $('<li class="box" ~~~ /li>) 까지 얻어오고 있습니다.

예를 들어 두 번째 .end()가 없으면<input type="hidden" class="user_id" name="" value="">라는 부분만 append 됩니다.

마지막으로

rryu님께 지적해 주신 방법으로 재작성했습니다.
감사합니다!

번외편; 최근에 구입한 재미있는 것

・헌터 헌터 34권(6/29)
클로로 VS 히소카라든지, 어쨌든 재미있게 되면
・커튼 자동 개폐 로봇
커튼 레일에 붙이는 4000엔의 로봇.
이것을 붙이고 나서 알람 없이 일어나는 비율이 올랐다.
・에토 미채 사진집
「예쁜 언니」를 좋아하는 사람, 조금 바라보고 있는 것만으로 행복해질 수 있어요.