현재 버전

아 진짜 도와드리고 싶은데 아직까지 저의 한계가 거기까지는 ㅠㅠ...

es6 은 아마 템플릿 리터럴을 쓰셔야될 것이에요.

https://poiemaweb.com/es6-template-literals


const linesToHTML = function (characters) {

  return characters.reduce(function (charactersResult, character) {

    let {name, lines} = character

    return `${charactersResult || ''}

<article>

  <h1>${name}</h1>

  <ul>

    ${lines.reduce(function (linesResult, line) {

      return `${linesResult || ''}

    <li>${line}</li>

      `.trim()}, 0)}

  </ul>

</article>

  `.trim()}, 0)

}

const characters = [{

  name: 'Aria Stark',

  lines: ['A girl has no name.']

}, {

  name: 'John Snow',

  lines: [

    'You know nothing, John Snow.',

    'Winter is coming.'

  ]

}]

document.body.innerHTML = linesToHTML(characters)

템플릿 리터럴의 예를 복사한 코드 이구요.

다른방법으로는

Document createElement 라고 참고하시면 될 것 같습니다.

https://developer.mozilla.org/ko/docs/Web/API/Document/createElement

제가 이제 배울려고 하는 도중이라 쉽게 도와드릴 수가 없을 것 같네여 ㅠ 좀 더 공부해본뒤 풀 수 있으면 다시 답장 할께요;;




수정 이력

2019-08-28 21:41:22 에 아래 내용에서 변경 됨 #1

아 진짜 도와드리고 싶은데 아직까지 저의 한계가 거기까지는 ㅠㅠ...

es6 은 아마 템플릿 리터럴을 쓰셔야될 것이에요.

https://poiemaweb.com/es6-template-literals


const linesToHTML = function (characters) {

  return characters.reduce(function (charactersResult, character) {

    let {name, lines} = character

    return `${charactersResult || ''}

<article>

  <h1>${name}</h1>

  <ul>

    ${lines.reduce(function (linesResult, line) {

      return `${linesResult || ''}

    <li>${line}</li>

      `.trim()}, 0)}

  </ul>

</article>

  `.trim()}, 0)

}

const characters = [{

  name: 'Aria Stark',

  lines: ['A girl has no name.']

}, {

  name: 'John Snow',

  lines: [

    'You know nothing, John Snow.',

    'Winter is coming.'

  ]

}]

document.body.innerHTML = linesToHTML(characters)

템플릿 리터럴의 예를 복사한 코드 이구요.

다른방법으로는

Document createElement 라고 참고하시면 될 것 같습니다.

https://developer.mozilla.org/ko/docs/Web/API/Document/createElement

제가 이제 배울려고 하는 도중이라 쉽게 도와드릴 수가 없을 것 같네여 ㅠ 더 공부해본뒤 다시 답장 드릴께영..