Создание HTML с помощью JavaScript DOM (действительно базовый вопрос) - PullRequest
Новая
       2

Создание HTML с помощью JavaScript DOM (действительно базовый вопрос)

1 голос
/ 22 сентября 2011

У меня возникли проблемы с JavaScript. Каким-то образом я не могу начать (или сказать, что я не получаю никаких результатов) с созданием HTML-элементов с помощью JavaScript.

Мне запрещено использовать:

document.writeln("<h1>...</h1>");

я пробовал это: 

document.getElementsByTagName('body').appendChild('h1');
document.getElementsByTagName('h1').innerHTML = 'teeeekst';

и это: 

var element = document.createElement('h1');
element.appendChild(document.createTextNode('text'));

но мой браузер не показывает текст. Когда я помещаю предупреждение в этот блок кода, он показывает. Так что я знаю, что код набирается.

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

любой небольшой пример рабочего кода для установки h1 или div?

мой полный код: 

<html>
  <head>
    <title>A boring website</title>
    <link rel="stylesheet" type="text/css" href="createDom.css"> 


    <script type="text/javascript">

    var element = document.createElement('h1');
element.innerHTML = "Since when?";

document.body.appendChild(element);


    </script>

  </head>
  <body>

 </body>
</html>

Ответы [ 3 ]

3 голосов
/ 22 сентября 2011

getElementsByTagName возвращает NodeList (который похож на массив элементов), а не элемент.Вам нужно перебрать его или хотя бы выбрать из него элемент и получить доступ к свойствам элементов внутри него.(Тем не менее, на элемент body проще ссылаться как document.body.)

appendChild ожидает Node , а не строку. 

var h1 = document.createElement('h1');
var content = document.createTextNode('text');
h1.appendChild(content);
document.body.appendChild(h1);

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

Самый простой способ сделать это - поместить его в функцию, выполняющуюся при загрузке.

window.onload = function () {
    var h1 = document.createElement('h1');
    var content = document.createTextNode('text');
    h1.appendChild(content);
    document.body.appendChild(h1);
}

… но обычно лучше использовать библиотеку , которая абстрагирует различные надежные системы обработки событий в браузерах.

2 голосов
/ 22 сентября 2011

Вы добавили элемент в документ?

Почти так же, как вы добавляете текстовые узлы к вновь созданному элементу, вы также должны добавить элемент к целевому элементу DOM.

Так, например, если вы хотите добавить новый элемент к <div id="target"> где-то на странице, вы должны сначала получить элемент в качестве цели, а затем добавить. 

//where you want the new element to do
var target = document.getElementById('target'); 
// create the new element
var element = document.createElement('h1');
element.appendChild(document.createTextNode('text'));
// append
target.appendChild(element);
1 голос
/ 22 сентября 2011

создать элемент, добавить HTML-контент и добавить в тело 

var element = document.createElement('h1');
element.innerHTML = 'teeeekst';
document.body.appendChild(element);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...