1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
|
---
title: document.createElement
slug: Web/API/Document/createElement
tags:
- DOM
- Gecko
translation_of: Web/API/Document/createElement
original_slug: DOM/document.createElement
---
<p>{{ ApiRef() }}</p>
<h3 id=".D0.9E.D0.B1.D1.89.D0.B0.D1.8F_.D0.B8.D0.BD.D1.84.D0.BE.D1.80.D0.BC.D0.B0.D1.86.D0.B8.D1.8F" name=".D0.9E.D0.B1.D1.89.D0.B0.D1.8F_.D0.B8.D0.BD.D1.84.D0.BE.D1.80.D0.BC.D0.B0.D1.86.D0.B8.D1.8F">Общая информация</h3>
<p>В HTML-документах создает элемент c тем тегом, что указан в аргументе или <code>HTMLUnknownElement</code>, если имя тега не распознаётся.</p>
<p>В XUL-документах создает указанный в аргументе элемент XUL.</p>
<p>В остальных случаях создаёт элемент с нулевым <span id="result_box" lang="ru"><span class="hps"><em>NamespaceURI</em>.</span></span></p>
<h3 id=".D0.A1.D0.B8.D0.BD.D1.82.D0.B0.D0.BA.D1.81.D0.B8.D1.81" name=".D0.A1.D0.B8.D0.BD.D1.82.D0.B0.D0.BA.D1.81.D0.B8.D1.81">Параметры</h3>
<pre class="eval"><var>var element</var> = <var>document</var>.createElement(<var>tagName, [options]</var>);
</pre>
<ul>
<li><code>element</code> — созданый объект <a href="../Web/API/Element">элемента</a>.</li>
<li><code>tagName</code> — строка, указывающая элемент какого типа должен быть создан. <a href="ru/DOM/element.nodeName">nodeName</a> создается и инициализируется со значением <code>tagName</code>.</li>
<li>
<p><code>options</code> — необязательный параметр, объект <code>ElementCreationOptions</code>, который может содержать только поле <code>is</code>, указывающее имя пользовательского элемента, созданного с помощью <code>customElements.define()</code> (см. <a href="/ru/docs/Web/Web_Components">Веб-компоненты</a>).</p>
</li>
</ul>
<h3 id=".D0.9F.D1.80.D0.B8.D0.BC.D0.B5.D1.80.D1.8B" name=".D0.9F.D1.80.D0.B8.D0.BC.D0.B5.D1.80.D1.8B">Пример</h3>
<p>Данный пример создает новый элемент <code><div></code> и вставляет его перед элементом с идентификатором <code>org_div1</code>:</p>
<pre class="brush: js"><code class="language-html"><span class="doctype token"><!DOCTYPE html></span>
<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>html</span><span class="punctuation token">></span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>head</span><span class="punctuation token">></span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>title</span><span class="punctuation token">></span></span>||Работа с элементами||<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>title</span><span class="punctuation token">></span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>head</span><span class="punctuation token">></span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>body</span><span class="punctuation token">>
</span></span><div><h1>Привет!</h1></div>
<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span>'org_div1'</span><span class="punctuation token">></span></span>Текст выше сгенерирован автоматически.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>body</span><span class="punctuation token">>
<script>
<code class="language-html"><code class="language-javascript"> document.body.onload = addElement;
</code></code> var my_div = newDiv = null;
function addElement() {
// Создаем новый элемент div
// и добавляем в него немного контента
var newDiv = document.createElement("div");
newDiv.innerHTML = "<h1>Привет!</h1>";
// Добавляем только что созданый элемент в дерево DOM
my_div = document.getElementById("org_div1");
document.body.insertBefore(newDiv, my_div);
}
</script>
</html></span></span>
</code></pre>
<h3 id=".D0.97.D0.B0.D0.BC.D0.B5.D1.87.D0.B0.D0.BD.D0.B8.D1.8F" name=".D0.97.D0.B0.D0.BC.D0.B5.D1.87.D0.B0.D0.BD.D0.B8.D1.8F">Заметки</h3>
<p>Если существуют атрибуты со значениями по умолчанию, атрибуты узлов предоставляющие их создаются автоматически и применяются к элементу.</p>
<p>Для создания элементов с заданым пространством имен используйте метод <a href="ru/DOM/document.createElementNS">createElementNS</a>.</p>
<p>Реализация <code>createElement </code>в Gecko не соответствует DOM спецификации для XUL и XHTML документов: <code>localName</code> и <code>namespaceURI</code> не устанавливаются в <code>null</code> в созданном документе. Смотрите {{ Bug(280692) }} для подробностей.</p>
<p>Для обратной совместимости с предыдущими версиями спецификации пользовательских элементов некоторые браузеры позволяют передавать здесь строку вместо объекта, где значением строки является имя тега пользовательского элемента.</p>
<h3 id=".D0.A1.D0.BF.D0.B5.D1.86.D0.B8.D1.84.D0.B8.D0.BA.D0.B0.D1.86.D0.B8.D0.B8" name=".D0.A1.D0.BF.D0.B5.D1.86.D0.B8.D1.84.D0.B8.D0.BA.D0.B0.D1.86.D0.B8.D0.B8">Спецификации</h3>
<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-2141741547">DOM 2 Модуль: createElement</a></p>
<p>{{ languages( { "fr": "fr/DOM/document.createElement", "it": "it/DOM/document.createElement", "pl": "pl/DOM/document.createElement" } ) }}</p>
|
