Куда пропал текст h1?

Я создал и h1 в JS с помощью API, но теперь он не отображается на моей веб-странице. Если я попытаюсь изменить стиль, все вокруг изменится, но текст все равно не появится.

Вот мой HTML:

<div id = "profile-image" class = "profile-image"></div>
<div class = "profile-name"></div>

Вот мой JS:

fetch(GITHUB_URL) 
.then(function(response) {
 return response.json();
 })
.then(function (data) {
 const img = document.createElement('img'); 
 img.src = data.avatar_url;
 img.alt = 'Github prof'
 document.querySelector(".profile-image").appendChild(img); 

 const h1 = document.createElement('h1');
 h1.src = data.name;
 h1.alt = "my name";
 document.querySelector(".profile-name").appendChild(h1);

Изображение работало и видно на моей веб-странице. Под ним должен был появиться h1, но это не так. Когда я console.info(data.name) появляется текст, который я хочу. В моей консоли ошибок нет. Просто текст h1 не появляется. Спасибо

Заголовок HTML не имеет атрибутов src или alt.

— 10.01.2023 13:52

Как упоминалось выше, в h1 нет атрибута src. Вы можете использовать innerTEXT или innerHTML, чтобы изменить текст h1.

— 10.01.2023 13:56

javascript html dom

10.01.2023 13:48

Как собрать/развернуть часть вашего приложения Angular

Вам когда-нибудь требовалось собрать/развернуть только часть вашего приложения Angular или, возможно, скрыть некоторые маршруты в определенных средах?

Оптимизация React Context шаг за шагом в 4 примерах

При использовании компонентов React в сочетании с Context вы можете оптимизировать рендеринг, обернув ваш компонент React в React.memo сразу после...

Интервьюер: Почему '[] instanceof Object' возвращает "true"?

Все мы знаем, что [] instanceof Array возвращает true, но почему [] instanceof Object тоже возвращает true?

Абстрактное синтаксическое дерево (AST) и как оно работает с ReactJS

Абстрактное синтаксическое дерево (AST) - это древовидная структура данных, которая представляет структуру и иерархию исходного кода на языке...

Хук useReducer в react

3 эффективных способа найти максимальное значение в массивах JavaScript

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Тег h1 не имеет атрибутов src, если вы хотите показать значение в h1, используйте innerText вместо src

Использовать

const h1 = document.createElement('h1');
 h1.innerText = "sample text";
 h1.alt = "my name";
 document.querySelector(".profile-name").appendChild(h1);

<div class = "profile-name"></div>

10.01.2023 13:56

Элемент заголовка HTML не имеет атрибутов src или alt.

Возможно, вы имеете в виду

const data = {"name": "Fred", "avatar_url": "https://via.placeholder.com/150" }
const img = new Image();
img.src = data.name;
img.alt = 'Github prof';
document.querySelector(".profile-image").appendChild(img);
const h1 = document.createElement('h1');
h1.appendChild(document.createTextNode(data.name));
document.querySelector(".profile-name").appendChild(h1);

<div id = "profile-image" class = "profile-image"></div>
<div class = "profile-name"></div>

10.01.2023 13:57

Другие вопросы по теме

Добавление/изменение свойств во всех тегах типа (странные результаты)

Пространство CSS между другим гибким элементом

Добавить границы по бокам экрана в css

Выравнивание изображений в форме цветка

Как сделать, чтобы значок по умолчанию открывал гиперссылку в новой вкладке?

Как упростить этот простой JS-скрипт?

Затухание одного раздела и исчезновение следующего раздела при прокрутке веб-страницы

Фоновый фильтр для раскрывающегося списка

Wowjs animate css не работает wowjs не добавляет анимированный класс в элемент html

Как скрыть тег сведений без тега сводки?

Куда пропал текст h1?

Ответы 2

Другие вопросы по теме

Похожие вопросы