Сгенерированный Javascript / Typescript HTML отображается некорректно

#javascript #html #typescript

#javascript #HTML #typescript

Вопрос:

Я попытался создать некоторый динамический HTML. Я просто хочу проверить, работает ли это, и выполнил следующее:

 let context = document.getElementById(anyDivsId);
let h = document.createElement("H1");
let t = document.createTextNode("hello");
let item = h.appendChild(t);
console.log(item);
context.innerHTML = item;

Консоль просто регистрирует мне обычный текст, и innerHTML Div также является простым текстом, а не элементом HTML. Что я делаю не так?

Редактировать
Я действительно хочу показать h1, а не только обычный текст.
Я уже изменил context.innerHTML на context.appendChild

1. Вы должны добавлять t к context вместо h . Кроме того, удалите строку innerHTML.

2. h содержит t , поэтому нет, он добавляет h .

3. но поскольку он уже добавляет t, вероятно, это то, что вы хотели сказать.

Ответ №1:

Если вы устанавливаете значение innerHTML , это строка, а не узел DOM.

Либо сделайте

 let context = document.getElementById(anyDivsId);
context.innerHTML = "<h1>hello</h1>";

Или сделайте..

 let context = document.getElementById(anyDivsId);
let h = document.createElement("H1");
let t = document.createTextNode("hello");
h.appendChild(t);
context.appendChild(h);

1. Спасибо. appendChild Сработало, но добавляется только текст, а не информация, которой он должен быть <h1> .

2. @moessi774 — вы должны добавлять элемент h1, поскольку h1 содержит текст. я отредактировал ответ, чтобы отразить это.

3. @Pamblam ваш текущий post добавляет h к самому себе. Вы можете это исправить?

4. @moessi774 — Если вы не заметили, в моем примере была ошибка, на которую мне указали. Попробуйте код после того, как я его исправил. Он добавляет h1. и вам не нужно использовать как innerHTML, так и append child . если вы используете оба варианта одновременно, то вы увидите только тот, который был последним. эти два вызова противоречат друг другу.

5. @Pamblam — Ах, теперь я вижу. Я попытался добавить всю цепочку к div, что было неправильно, но мне это показалось таким логичным. Спасибо за объяснение.

Ответ №2:

Попробуйте это

 let context = document.getElementById(anyDivsId);
context.insertAdjacentHTML('beforeend', '<h1>Hello</h1>');

или

 let context = document.getElementById(anyDivsId);
let h = document.createElement("H1");
h.innerText = 'Hello';
context.appendChild(h);

Ответ №3:

Это должно сработать

проверьте следующий фрагмент

 window.onload=function(){
let context = document.getElementById('anyDivsId');
let h = document.createElement("h1");
let t = document.createTextNode("hello");
let item = h.appendChild(t);
console.log(item);
context.innerHTML = item;
  context.innerText="hello";
}

Надеюсь, это поможет