Question

如何仅使用选择器来创建新元素？（例如__init__，.myclass或#myid）基本上，您无法确定元素是div，span，li，anchor，还是元素类的div或带有ID等。

在jQuery中，我知道您可以a:not(.someclass)来获取可用的DOM对象。但是如何用JavaScript完成呢？

Answer 1

在jQuery中，我知道您可以执行$（选择器）以获取可用的DOM对象...

不创建一个。 jQuery将在DOM中搜索现有匹配项。您可以执行$("<div>")之类的操作（请注意，这是HTML，而不是CSS选择器）来创建元素，但是jQuery没有从CSS选择器中创建元素的功能。

但是如何用JavaScript完成呢？

您必须解析选择器，然后将document.createElement与标记名一起使用，然后设置选择器在新元素上描述的所有类或其他内容。

CSS选择器并不是很难解析。您将能够找到执行此操作的库。（jQuery具有内置的选择器引擎Sizzle，Sizzle是开源的。它自然具有解析选择器的代码。）

Answer 2

我知道这个问题是从2年前开始的，但我当时只是在从事类似的工作，并提出了解决方案。

  var selectors = {};
  let sequence = "";
  let sequenceType = "tag";
  let sequenceOver = false;

  selector.split("").forEach((i) => {  //loop through each character
    switch (i) { //add more cases to this switch as needed, it only works for id and class right now
      case "#": //id
        sequenceOver = true;
        sequenceType = "id";
        break;
      case ".": //class
        sequenceOver = true;
        sequenceType = "class";
        break;
      default: //just normal char
        sequence += i;
        break;
    }
    if (sequenceOver) {
      sequence = "";
      sequenceOver = false;
    }
    selectors[sequenceType] = sequence;
  });

  var elem = document.createElement(selectors.tag);
  if (selectors.id) {
    elem.id = selectors.id;
  }
  if (selectors.class) {
    elem.className = selectors.class;
  } //add more if-statements and cases for more selectors eg. > for child etc.

（仅供参考，我正在重新创建一个jQuery版本进行练习。）

Answer 3

Mootools 这样做。

new Element('#name.class')

收益

<div id="name" class="class"></div>

从选择器创建新元素？

3 个答案: