생존이냐 멸망이냐...숨겨진 HTML 태그

새 정보를 사용하여 DOM을 업데이트할 때는 다음 두 가지 옵션이 있습니다.
1) 모든 HTMl을 파일에 넣고 편집하거나
2) 처음부터 작성하여 DOM에 첨부합니다.
나의 최신 응용 프로그램에서 나는 두 가지 방법을 사용했는데, 때로는 동시에 사용한다.나는 결코 가장 좋은 방법의 궁극적인 지식 원천은 아니지만, 입문을 위해 몇 가지 기본적인 장점과 단점을 총결하였다.

일반 HTML 뷰에 숨기기

내가 구축을 시작했을 때, 내가 만든 첫 번째 일은 데이터베이스에 새로운 대상의 폼을 추가하고 싶은 것이다.만약 HTML이 어떤 모양인지 확실하지 않다면, 가장 간단한 방법은 바로 순수한 HTML로 쓰는 것이다.나도 폼이 항상 페이지에 어지럽히는 것을 원하지 않는다는 것을 알고 '숨기기' 속성을 추가했다.이것은 근본적으로 응용 프로그램의 특성이 아니다.나는 폼을 색인 파일에 직접 쓸 것이다. 왜냐하면 이것은 JS로 폼을 인코딩해서 숨기려는 것보다 쉽기 때문이다. 왜냐하면 나는 그것들을 더 처리할 준비가 되지 않았기 때문이다.
하지만 나중에 나는 내가 이런 것을 좀 좋아한다는 것을 깨달았다.어떤 경우, 이것은 안전한 문제일 수도 있지만, 단추를 누르기만 하면, 이 폼들 중 어느 것도 숨겨지지 않고, 이 폼을 통해 보내는 모든 데이터도 검증될 수 있다.이 폼들을 거기에 두는 것은 사용자가 새로운 대상을 만들려고 할 때까지 충분한 안전한 노름돈인 것 같다.

처음 응용 프로그램

버튼을 클릭하여 숨겨진 속성을 제거합니다.
내가 응용 프로그램의 다른 부분을 구축하기 시작했을 때, 나는 같은 시스템을 따랐다.간단한 HTML로 작성합니다. 만약 내가 계속 작성할 준비가 되지 않았거나, 특정 시간에만 표시할 준비가 되어 있지 않으면 그것을 숨깁니다.그것은 나의 표에 매우 효과가 있으며, 정태를 유지하고, 영원히 변경할 필요가 없다.이것은 모든 원소를 찾아서 정확한 순서로 정확한 부모 원소에 추가하는 것보다 훨씬 쉽다.

빅맥

지정한 대상의 모든 정보를 표시하기 위해서, 나는 페이지 중간에 있는 Jumbotron에서 인코딩을 했다.나는 거의 모든 HTML 하드 인코딩에서 시작하여 내가 하고 싶은 요소만 선택하고 사용자가 보고 싶은 대상에 따라 편집하는 것을 생각했다.이것은 매우 가능성이 있지만, 나는 한 대상을 다른 대상으로 보는 것으로 전환할 때 문제가 생겼다.
만약 나의 대상이 구조적으로 더욱 같다면, 나는 계속 이럴 것이다.그러나 내 구조는 사용자가 대상에 대해 일부, 많은, 또는 속성이 없도록 허용한다.하나의 솔루션은 "만약"제품군입니다.이 데이터가 있으면 원소값을 바꾸십시오. 그렇지 않으면 원소값을 지우십시오.근데 뭐가 더 쉬운지 알아요?document.querySelect().innerHTML = ""그 작은 코드는 나의 가장 친한 새 친구가 되었다.나는 원소를 색인에서 옮기기 시작했다.html 그리고 제 코드에 그것들을 만듭니다.
나는 거의 즉시 이 페이지를 엉망으로 만들었다.정확한 부항을 찾아 정확한 순서대로 추가...처음에 나는 이런 일을 정확하게 하지 못했다.하지만 그건 좋아요!이것은 모두 시도와 오류입니다. 맞습니까?하지만 어떤 것들은 그것을 더욱 매끄럽게 할 수 있다...

그래서 사실은'div'요소가 실제로 유용하다는 것을 증명한다!

누가 생각하겠어!나는div 요소를 사용하여 아름다운 HTML 작은 프레임워크를 구축한 다음에 이div 요소를 잡고 새로운 하위 요소를 추가함으로써 모든 정보를 정확한 위치에 두는 것이 훨씬 쉽다.

<div class="jumbotron" hidden="">
      <div class="storyInfo">
    </div>
      <p>Characters:</p>
      <ul class="list-group" id="storyCharacters">
      </ul>
      <hr class="my-4">
      <p class="lead">
        <div class="list-group">
          <ol id="plot-points">
            <li class="list-group-item list-group-item-action active">Plot Points:</li>
          </ol>
        </div>
      </p>
      <div class="buttons"></div>
    </div>

이 특정한 예에서, 그것은 적나라하게 보이지 않는다. 왜냐하면 나는 CSS 라벨을 사용하고 있기 때문이다. (고맙습니다. bootswatch하지만 나를 믿어라, 이 사람은 위대한 중간자이다.보시다시피 저는'hidden'속성을 사용하여'jumbotron'div 요소 전체를 숨기고 있습니다. 준비가 될 때까지 몇 가지 세부 사항을 인코딩했습니다. 모든 디스플레이 대상에 대해서도 마찬가지입니다.

너는 억지로 x를 인코딩할 수 없다

물론, 일부 지역에서는 나의 하드코딩 HTML이 기본적으로 존재하지 않는다.나의 일부div 사이에는 전혀 내용이 없지만,div를 자리 차지 문자로 사용하면 원소를 정확한 위치에 쉽게 추가할 수 있다.
예를 들어 내 캐릭터 목록:<ul class="list-group" id="storyCharacters"></ul>목록에 얼마나 많은 항목이 추가될지 알 수 없습니다.따라서 각 역할 객체에는 4개의 다른 요소가 있지만 이 예에서는 JS에서 이러한 요소를 작성하고 첨부하는 것이 좋습니다.그렇지 않으면, 목록 요소에서 하드코딩을 한 다음, 그것들을 잡아서 값을 편집할 것입니다.만약 사용자마다 세 글자만 허용한다면, 나는 이 점을 할 수 있다.그런데 어떤 사용자 체험인가요?

let characterList = document.querySelector('#storyCharacters')
        characterList.reset

        let newLi = document.createElement('li')
        newLi.className = "list-group-item flex-column align-items-start"
        newLi.id = `${this.name}-${this.story_id}`

        let newDiv = document.createElement('div')
        newDiv.className = "d-flex w-100 justify-content-between"

        let charName = document.createElement('h5')
        charName.className = "mb-1"
        charName.id = `${this.id}-editName`
        charName.innerText = this.name

        let charDes = document.createElement('p')
        charDes.className = "mb-1"
        charDes.id = `${this.id}-editDes`
        charDes.innerText = this.description

        characterList.append(newLi)
        newLi.append(newDiv)
        newDiv.append(charName)
        newLi.append(charDes)

리 요소를 제외하고 모든 문자는 자신의div 요소를 가지고 있기 때문에 문자 이름과 설명을 정확하게 추가할 수 있습니다.

지금 제가 #d3을 봤어요.

이전에 HTML 코드를 작성할 때, 나는 요소에 id 표시를 놓거나 div에서 요소를 포장하는 데 인내심이 없었다.나는 정말 스타일링을 위한 id만 추가할 뿐, 보통 사실이 발생한 후에만 추가할 수 있다.다음과 같은 이점을 통해 애플리케이션을 더욱 효과적으로 사용할 수 있습니다.
1) 좋은 CSS 파일로 시작합니다(감사합니다bootswatch!이것은 내가dom에 원소를 추가할 때, 나는 원소가 무엇처럼 보이고 싶은지 알고, 초기에 적당한 표시를 추가했다는 것을 의미한다.
2) 인코딩할 때는 다음 단계를 고려해야 한다.입력 필드에 접근해야 하는 값을 알고 있다면, 의미 있는 id를 주는 것이 좋습니다. (이 항목에는 'input-tag-002' 가 없습니다.)물론, inspect를 사용하여 잘못 놓은 요소를 찾을 수 있지만, 프로젝트 전체에서 같은 이름을 사용하는 것은 훨씬 쉽다.
솔직히 말해서, 이것은 내가 이 응용 프로그램에서 얻은 두 가지 가장 큰 수확이다.명백히 알 수 있다이 가능하다, ~할 수 있다,...그러나 가끔은 대사라도 자신에게 가장 간단한 최선의 실천이 다른 세상을 가져올 수 있다는 것을 일깨워야 한다