files/ar/web/api/element/insertadjacenthtml/index.html


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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102

---
title: Element.insertAdjacentHTML()
slug: Web/API/Element/insertAdjacentHTML
tags:
  - دوم
  - عنصر إدخال
translation_of: Web/API/Element/insertAdjacentHTML
---
<div dir="rtl">{{APIRef("DOM")}}</div>

<p dir="rtl">تعمل طريقة  ()insertAdjacentHTML ل {{domxref ("Element")}}</p>

<p dir="rtl">للواجهة على تحليل النص المحدد بتنسيق HTML أو XML وإدراج العقد الناتجة في شجرة DOM في موضع محدد. لا يعيد العنصر الذي يتم استخدامه عليه، وبالتالي لا يفسد العناصر الموجودة داخل هذا العنصر. هذا يتجنب الخطوة الإضافية للتسلسل، مما يجعلها أسرع بكثير من المعالجة المباشر</p>

<p dir="rtl">{{domxref ("Element.innerHTML","innerHTML")}}.</p>

<h2 dir="rtl" id="بناء_الجملة">بناء الجملة</h2>

<pre class="syntaxbox notranslate"><em>element</em>.insertAdjacentHTML(<em>position</em>, <em>text</em>);</pre>

<h3 dir="rtl" id="العوامل">العوامل</h3>

<dl>
 <dt><code>position الموضع </code></dt>
 <dd dir="rtl">{{domxref ("DOMString")}} يمثل الموضع المتعلق بالعنصر element ؛ يجب أن يكون أحد السلاسل strings التالية:</dd>
 <dd>
 <ul>
  <li dir="rtl"><code style="color: red;">'beforebegin'</code>:   قبل العنصر <code>element نفسه</code>.</li>
  <li dir="rtl"><code style="color: green;">'afterbegin'</code>: داخل العنصر <code>element</code>, قبل التابع الأول له (child).</li>
  <li dir="rtl"><code style="color: blue;">'beforeend'</code>: داخل العنصر <code>element</code>, بعد آخر تابع له (child).</li>
  <li dir="rtl"><code style="color: magenta;">'afterend'</code>: بعد العنصر <code>element</code> نفسه.</li>
 </ul>
 </dd>
 <dt><code>text النص</code></dt>
 <dd dir="rtl">السلسلة (string) المطلوب تحليلها كـ HTML أو XML وإدراجها في الشجرة.</dd>
</dl>

<h3 dir="rtl" id="تصور_مرئي_لأسماء_المواقع">تصور مرئي لأسماء المواقع</h3>

<pre class="notranslate">&lt;!-- <strong><code style="color: red;">beforebegin</code></strong> --&gt;
<code style="font-weight: bold;">&lt;p&gt;</code>
  &lt;!-- <strong><code style="color: green;">afterbegin</code></strong> --&gt;
  foo
  &lt;!-- <strong><code style="color: blue;">beforeend</code></strong> --&gt;
<code style="font-weight: bold;">&lt;/p&gt;</code>
&lt;!-- <strong><code style="color: magenta;">afterend</code></strong> --&gt;</pre>

<div class="note" dir="rtl"><strong>ملحوظة</strong>: لا يعمل الوضع قبل البداية والنهاية إلا إذا كانت العقدة في شجرة DOM ولها عنصر أصل.</div>

<h2 dir="rtl" id="مثال">مثال</h2>

<pre class="brush: js notranslate">// &lt;div id="one"&gt;one&lt;/div&gt;
var d1 = document.getElementById('one');
d1.insertAdjacentHTML('afterend', '&lt;div id="two"&gt;two&lt;/div&gt;');

// </pre>

<pre class="notranslate">At this point, the new structure is:</pre>

<pre class="brush: js notranslate">// &lt;div id="one"&gt;one&lt;/div&gt;&lt;div id="two"&gt;two&lt;/div&gt;</pre>

<h2 dir="rtl" id="ملاحظات">ملاحظات</h2>

<h3 dir="rtl" id="إعتبارات_أمنية">إعتبارات أمنية</h3>

<p dir="rtl">عند إدراج HTML في صفحة باستخدام insertAdjacentHTML () ، احرص على عدم استخدام إدخال المستخدم الذي لم يتم تجاوزه.</p>

<p dir="rtl">لا يُنصح باستخدام insertAdjacentHTML () عند إدراج نص عادي ؛ بدلاً من ذلك ، استخدم خاصية {{domxref ("Node.textContent")}} أو طريقة method {{domxref ("Element.insertAdjacentText ()")}}. هذا لا يفسر المحتوى الذي تم تمريره على أنه HTML ، ولكن بدلاً من ذلك يُدرجه كنص خام.</p>

<h2 dir="rtl" id="مواصفات">مواصفات</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">مواصفات</th>
   <th scope="col">الحالة</th>
   <th scope="col">تعليق</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('DOM Parsing', '#dom-element-insertadjacenthtml', 'Element.insertAdjacentHTML()')}}</td>
   <td>{{ Spec2('DOM Parsing') }}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 dir="rtl" id="التوافق_مع_المتصفحات">التوافق مع المتصفحات</h2>

<div class="hidden" dir="rtl">يتم إنشاء جدول التوافق في هذه الصفحة من البيانات المهيكلة. إذا كنت ترغب في المساهمة في البيانات ، يرجى مراجعة https://github.com/mdn/browser-compat-data وإرسال طلب سحب إلينا.</div>

<p dir="rtl">{{Compat("api.Element.insertAdjacentHTML")}}</p>

<h2 dir="rtl" id="شاهد_أيضا">شاهد أيضا</h2>

<ul>
 <li>{{domxref("Element.insertAdjacentElement()")}}</li>
 <li>{{domxref("Element.insertAdjacentText()")}}</li>
 <li>{{domxref("XMLSerializer")}}: Construct a DOM representation of XML text</li>
 <li><a class="external" href="https://hacks.mozilla.org/2011/11/insertadjacenthtml-enables-faster-html-snippet-injection/">hacks.mozilla.org guest post</a><span class="external"> by Henri Sivonen including benchmark showing that insertAdjacentHTML can be way faster in some cases.</span></li>
</ul>