Почему document.createElement('br') из файла json не отображается

#javascript #json

Вопрос:

Я пытаюсь настроить обучающий файл json-hero из https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/JSON . Мне не нужен длинный список «полномочий». Я хочу отобразить его как короткий текст с разрывами строк. Я заменил document.createElement(‘li’) на document.createElement(‘br’). Почему document.createElement(‘br’) из файла .json (superheroes.json) не отображается, а только скрыт? (Если document.createElement(‘p’) используется для замены, он отображается нормально.) https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json Вот сценарий:

  <script>
    const header = document.querySelector('header');
    const section = document.querySelector('section');

    let requestURL = 'superheroes.json';
    let request = new XMLHttpRequest();
    request.open('GET', requestURL);
    request.responseType = 'json';
    request.send();

    request.onload = function() {
      const superHeroes = request.response;
      populateHeader(superHeroes);
      showHeroes(superHeroes);
    }

    function populateHeader(obj) {
      const myH1 = document.createElement('h1');
      myH1.textContent = obj['squadName'];
      header.appendChild(myH1);

      const myPara = document.createElement('p');
      myPara.textContent = 'Hometown: '   obj['homeTown']   ' // Formed: '   obj['formed'];
      header.appendChild(myPara);
    }

    function showHeroes(obj) {
      const heroes = obj['members'];

      for(let i = 0; i < heroes.length; i  ) {
        const myArticle = document.createElement('article');
        const myH2 = document.createElement('h2');
        const myPara1 = document.createElement('p');
        const myPara2 = document.createElement('p');
        const myPara3 = document.createElement('p');
        //const myList = document.createElement('ul'); > replaced by:
        const myDiv = document.createElement('div');

        myH2.textContent = heroes[i].name;
        myPara1.textContent = 'Secret identity: '   heroes[i].secretIdentity;
        myPara2.textContent = 'Age: '   heroes[i].age;
        myPara3.textContent = 'Superpowers:';

        const superPowers = heroes[i].powers;
        var x = "";
        for(let j = 0; j < superPowers.length; j  ) {
            
          //const listItem = document.createElement('li');  > replaced by br
          //problem - the following is hidden and not displayed:
          const newlineItem = document.createElement('br');
          
          newlineItem.textContent = superPowers[j];
          myDiv.appendChild(newlineItem);
        }

        myArticle.appendChild(myH2);
        myArticle.appendChild(myPara1);
        myArticle.appendChild(myPara2);
        myArticle.appendChild(myPara3);
//content of myDiv is hidden - why?        
myArticle.appendChild(myDiv);
        section.appendChild(myArticle);
      }
    }

    </script>

1.   теги не имеют содержимого. Что вы ожидаете сделать newlineItem.textContent = superPowers[j]; ?

2. Вы делаете newlineItem.textContent = superPowers[j]; , но это не приводит к допустимому содержимому DOM. Он должен выдавать  some text , однако это на самом деле невозможно.

3. br является пустым элементом, он не может содержать никакого содержимого.

4. Я просто хочу отобразить текст с разрывами строк

5. Почему бы не использовать div then? Обратите внимание, что вы можете стилизовать a div , чтобы он больше походил на a li , просто установите для него некоторый запас с помощью CCS.

Ответ №1:

Вы сталкиваетесь с этой проблемой, потому что теги br не отображаются на экране, если вы проверяете свой код, вы должны увидеть что-то вроде  Content of superPowers[j] , но это не видно на вашем экране.

Чтобы получить желаемый результат, вы можете попробовать изменить тег br на тег p (если вы хотите вернуться к следующей строке в следующей суперспособности) или с помощью тега span (если вы хотите поместить свои суперспособности в ту же строку).).

Ваш код должен выглядеть следующим образом:

 //each element in a new line method
const newlineItem = document.createElement('p');
newlineItem.textContent = superPowers[j];
myDiv.appendChild(newlineItem);

//same line method
const newlineItem = document.createElement('span');
newlineItem.textContent = superPowers[j];
myDiv.appendChild(newlineItem);