We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

这篇翻译不完整。请帮忙从英语翻译这篇文章

这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

 ChildNode.before 方法可以在ChildNode这个节点的父节点中插入一些列的 Node 或者 DOMString 对象,位置就是在ChildNode节点的前面,DOMString 对象其实和 Text节点一样的方式来完成插入的。

语法

[Throws, Unscopable] 
void ChildNode.before((Node or DOMString)... nodes);

Parameters参数

nodes
一系列的 Node 或者 DOMString 

Exceptions

  • HierarchyRequestError: 当节点插入了错误的层级就会出现报错,需要遵循html标签的层级关系,

Examples事例

Inserting an element插入元素节点

var parent = document.createElement("div");
var child = document.createElement("p");
parent.appendChild(child);
var span = document.createElement("span");

child.before(span);

console.log(parent.outerHTML);
// "<div><span></span><p></p></div>"

Inserting text插入文本节点

var parent = document.createElement("div");
var child = document.createElement("p"); 
parent.appendChild(child);

child.before("Text"); 

console.log(parent.outerHTML);
// "<div>Text<p></p></div>"

Inserting an element and text同时插入文本和元素

var parent = document.createElement("div");
var child = document.createElement("p"); 
parent.appendChild(child); 
var span = document.createElement("span");

child.before(span, "Text"); 

console.log(parent.outerHTML);
// "<div><span></span>Text<p></p></div>"

ChildNode.before() is unscopable不可使用区域

The before() 不能配合with声明使用,See Symbol.unscopables for more information.

with(node) { 
  before("foo");
}
// ReferenceError: before is not defined 

Polyfill

兼容ie9或者更高版本的方法,You can polyfill the before() method in Internet Explorer 9 and higher with the following code:

// from: https://github.com/jserz/js_piece/blob/master/DOM/ChildNode/before()/before().md
(function (arr) {
  arr.forEach(function (item) {
    if (item.hasOwnProperty('before')) {
      return;
    }
    Object.defineProperty(item, 'before', {
      configurable: true,
      enumerable: true,
      writable: true,
      value: function before() {
        var argArr = Array.prototype.slice.call(arguments),
          docFrag = document.createDocumentFragment();
        
        argArr.forEach(function (argItem) {
          var isNode = argItem instanceof Node;
          docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
        });
        
        this.parentNode.insertBefore(docFrag, this);
      }
    });
  });
})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);

Specification

Specification Status Comment
DOM
ChildNode.before()
Living Standard Initial definition.

Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 54.0 49 (49) ? 39 ?
Feature Android Android Webview Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support 未实现 54.0 49.0 (49) ? 39 ? 54.0

See also

文档标签和贡献者

此页面的贡献者: caoweiju
最后编辑者: caoweiju,