createElementNS和createElement区别

2020-05-12 10:17:07

createElementNS创建一个具有指定的命名空间URI和限定名称的元素。

要创建一个元素而不指定命名空间URI,请使用  createElement 方法。

语法

let element=document.createElementNS(namespaceURI,qualifiedName[, options]);

参数

  • namespaceURI

  • 指定与元素相关联的命名空间URI的字符串。创建的元素的namespaceURI属性使用namespaceURI的值进行初始化。 参见有效的命名空间URL

  • qualifiedName

  • 指定要创建的元素的类型的字符串。 创建的元素的nodeName属性使用qualifiedName的值进行初始化。

  • options可选的

  • 一个可选的包含单个属性的ElementCreationOptions对象,其值是预先使用customElements.define()定义的自定义元素的标签名称。为了向后兼容自定义元素规范的早期版本,一些浏览器允许您在此使用字符串替代对象,其中字符串的值是自定义元素的标签名称。有关如何使用此参数的详情,请参阅原生HTML元素

  • 新元素将被赋予一个属性,其值是自定义元素的标签名称。 自定义元素是实验中的功能,目前仅在某些浏览器中可用。

返回值

元素

有效的命名空间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

示例

XHTML命名空间中创建一个新的<div>元素并将其添加到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("这是使用createElementNS和createTextNode动态构造的文本,然后使用appendChild插入到文档中。");
   newdiv.appendChild(txtnode);
   container.appendChild(newdiv);
 }]]></script>

 <vbox id='ContainerBox' flex='1'>
  <html:div>
   此页面上的脚本将添加以下动态内容:  </html:div>
 </vbox></page>

上面给出的示例中使用了在XHTML文档中不推荐的内联脚本。这个特定的示例实际上是一个嵌入XHTML的XUL文档,然而,仍然建议适用


  • 2017-01-19 01:05:32

    process对象

    process对象是Node的一个全局对象,提供当前Node进程的信息。它可以在脚本的任意位置使用,不必通过require命令加载。该对象部署了EventEmitter接口。

  • 2017-01-20 21:59:11

    WEBPACK DEV SERVER

    webpack-dev-server是一个小型的node.js Express服务器,它使用webpack-dev-middleware中间件来为通过webpack打包生成的资源文件提供Web服务。它还有一个通过Socket.IO连接着webpack-dev-server服务器的小型运行时程序。

  • 2017-01-21 10:32:29

    Vue-cli proxyTable 解决开发环境的跨域问题

    和后端联调时总是会面对恼人的跨域问题,最近基于Vue开发项目时也遇到了这个问题,两边各自想了一堆办法,查了一堆资料,加了一堆参数,最后还得我把自己的localhost映射成上线时将要使用的域名。

  • 2017-01-21 21:44:29

    详解 ESLint 规则,规范你的代码

    在很久之前就想通过工具来规范自己的代码风格,减少程序出错的概率,如果看过我的 一个前端程序猿的Sublime Text3的自我修养 ,这篇博客的朋友,肯定知道在当时我使用 SublimeLinter-jshint 插件来规范风格,但是实际上一直懒癌发作也没去看它的文档,使用着它默认的规则。不过现在是时候切换到 ESLint 了!

  • 2017-01-23 23:09:16

    使用 CSS3 实现超炫的 Loading(加载)动画效果

     SpinKit 是一套网页动画效果,包含8种基于 CSS3 实现的很炫的加载动画。借助 CSS3 Animation 的强大功能来创建平滑,易于定制的动画。SpinKit 的目标不是提供一个每个浏览器都兼容的解决方案,而是给现代浏览器提供更优的技术实现方案和更佳的使用体验。(为保证最佳的效果,请在 Chrome、Firefox 和 Safari 等现代浏览器中浏览)