Document.createElementNS()
يُنشئُ التّابع Document.createElementNS()
عنصرًا جديدًا بعنوان URI الخاصّ بمجال الأسماء والاسم الموصوف المُحدّدَين.
لإنشاء عنصرٍ دون تحديد عنوان URI الخاصّ بمجال الأسماء، استعمل التّابع createElement
.
البنية العامة
var element = document.createElementNS(namespaceURI, qualifiedName[, options]);
المعاملات
namespaceURI
سلسلةٌ نصيّةٌ تُحدّد عنوان URI الخاصّ بمجال الأسماء لربطه بالعنصر. وتُحدّد قيمةُ الخاصيّة namespaceURI
الخاصّة بالعنصر المُنشأ من قيمة هذا المُعامل. انظر عناوين URI الخاصّة بمجال الأسماء الصّالحة أدناه.
qualifiedName
سلسلةٌ نصيّةٌ تُحدّد نوع العنصر المرغوب إنشاؤه. وتُحدّد قيمةُ الخاصيّة nodeName
الخاصّة بالعنصر المُنشأ من قيمة هذا المُعامل.
options
مُعاملٌ اختياريّ من النّوع ElementCreationOptions
يحتوي على خاصيّة واحدة تُسمّى is
، وقيمتها هي اسمُ الوسمِ لعنصرٍ مُخصّصٍ مُعرّفٍ مُسبقًا عبر التّابع customElements.define()
. لإبقاء التوافقيّة العكسيّة مع النّسخ السّابقة من مواصفة Custom Elements، ستسمح لك بعض المتصفحات بتمرير سلسلةٍ نصيّة عوضًا عن كائنٍ هنا، والذي تكون فيه قيمةُ السّلسلةِ النّصيّة اسمَ وسمِ العنصرِ المُخصّص. انظر صفحة بناء مكونات الويب لمزيد من المعلومات حول كيفيّة استعمال هذا المُعامل.
سيُعطى العنصر الجديد خاصيّة is
قيمتها اسمُ وسم العنصرِ المُخصّص. العناصر المُخصّصة ميّزة تجريبيّة وغير مُتاحةٍ سوى في بعض المتصفحات.
القيمة المعادة
الكائن الجديد من النّوع Element
.
عناوين URI الخاصّة بمجال الأسماء الصالحة
- HTML – استعمل القيمة
http://www.w3.org/1999/xhtml
- SVG – استعمل القيمة
http://www.w3.org/2000/svg
- XBL – استعمل القيمة
http://www.mozilla.org/xbl
- XUL – استعمل القيمة
http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul
أمثلة
يُنشئ المثال التّالي عنصر <div>
جديد في مجال الأسماء XHTML ويُضيفه إلى العنصر vbox
. ورغم أنّ هذا مثال على مُستند XUL غير ذي فائدةٍ كبيرة، إلّا أنّه يفي بغرضِ توضيحِ كيفيّة استعمال عناصرَ من مجاليْ أسماءٍ مختلفين مكتوبين في مُستندٍ واحد.
<?xml version="1.0"?>
<page xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:html="http://www.w3.org/1999/xhtml"
title="||Working with elements||"
onload="init()">
<script type="text/javascript"><![CDATA[
var container;
var newdiv;
var txtnode;
function init(){
container = document.getElementById("ContainerBox");
newdiv = document.createElementNS("http://www.w3.org/1999/xhtml","div");
txtnode = document.createTextNode("هذا هو النّص الذي أُنشئَ ديناميكيًّا باستعمال التّابع ثمّ أضيف إلى المستند");
newdiv.appendChild(txtnode);
container.appendChild(newdiv);
}
]]></script>
<vbox id='ContainerBox' flex='1'>
<html:div>
سيضيف السكربت على هذه الصّفحة محتوى ديناميكيًّا أسفله
</html:div>
</vbox>
</page>
مُلاحظة: يَستخدم المثال أعلاه سكربتًا سطريًّا (inline script) والذي لا يُنصَح به في مستندات XHTML. وهذا المثال في الواقع مُستندُ XUL مع مُستند XHTML مُضمَّن، لكن على الرّغم من ذلك، يجب اتّباع المنصوح به.
دعم المتصفحات
الميزة | Chrome | Internet Explorer | Edge | Firefox | Opera | Safari |
---|---|---|---|---|---|---|
الدعم الأساسي | نعم | نعم | نعم | نعم | نعم | نعم |
المُعامل options
|
نعم | ؟ | لا | 50 | ؟ | ؟ |
انظر أيضًا
مصادر ومواصفات
- مواصفة DOM.