Блог

Интересно, какой самый эффективный способ создать элемент с помощью id='id' class='class' attr='attr' .. и добавить его к другому элементу, чтобы он был доступен как переменная?

Пока я могу сделать это с помощью одной строки кода. Но для этого требуется новый набор фреймворков javascript. Я просто хочу сначала убедиться, что более эффективного способа нет.

Мое решение заключается в создании фреймворка javascript, который получил следующий синтаксис:

var variable = elementTagAppend/Prepend/After/Before('JQuerySelector', elementToAppend/Prepend/After/BeforeTo);

Например, если я хочу создать элемент div с id =’id’, class=’class’, attr=’attr’ и добавить его к другому элементу с именем «another»

var variable = divAppend('#id.class[attr = "attr"]', another); Очень эффективный, не так ли?

Или, если я хочу добавить к элементу формы id=’InputForm’, class=’inputForms’:

var variable = formPrepend('#inputForm.inputForms', another);

 var element = $("<div/>", {
    id: "id",
    class: "class",
    attr: "attr"
}).appendTo("#element");
  

appendTo возвращает объект jQuery, подробнее вы можете прочитать на http://api.jquery.com/appendTo /

Редактировать: похоже, вы спрашиваете, является ли эффективным способом создания элементов наличие методов для всех HTML-тегов, чтобы вашей библиотеке не приходилось выполнять какой-либо синтаксический анализ текста / регулярное выражение.

Это не решение, поскольку это значительно замедляет разработку.

Один из способов — использовать функцию и методы DOM:

 <script type="text/javascript">

var elementData = {
  tagName: 'div',
  properties: {
    id: 'div0',
    onclick: function(){alert(this.id);},
    className: 'someClass'
  },
  content: '<h1>New Div</h1>'
}


function elementBuilder(obj) {
  var el = document.createElement(obj.tagName);
  var props = obj.properties;

  for (var p in props) {
    if (props.hasOwnProperty(p)) {
      el[p] = props[p];
    }
  }

  if (typeof obj.content == 'string') {
    el.innerHTML = obj.content;
  }
  return el;
}

</script>

<button onclick="
  var newElement = elementBuilder(elementData);
  document.body.insertBefore(newElement, this.nextSibling);
">Insert element</button>
  

Вышесказанное можно расширить, чтобы создавать более одного элемента за вызов, я оставлю это вам.

Другой метод заключается в том, чтобы взять HTML-строку, преобразовать ее в элемент (или элементы) и вернуть ее во фрагменте документа:

 <script type="text/javascript">

var htmlString = '<p><b>paragraph</b></p>'  
                 '<p>Another p</p>';

function byInnerHTML(s) {
  var d = document.createElement('div');
  d.innerHTML = s;
  var frag = document.createDocumentFragment();

  while (d.firstChild) {
    frag.appendChild(d.firstChild);
  }
  return frag;
}

</script>

<button onclick="
  var newContent = byInnerHTML(htmlString);
  document.body.insertBefore(newContent, this.nextSibling);
">Insert element</button>
  

Второй возвращает фрагмент документа, который можно вставить на страницу. Конечно, если вы хотите сгенерировать части таблицы, второй способ не так хорош.

В соответствии с чистой реализацией JavaScript, вот мой взгляд на проблему:

     function createElement(type, attributes, parent){
    var node = document.createElement(type);

    for (i in attributes){
        node.setAttribute(i, attributes[i])
    }

    if (parent amp;amp; parent.__proto__.appendChild){
        parent.appendChild(node)
    }

    return node;
}
  

И вы используете его следующим образом:

 createElement("span", { "id": "theID", "class": "theClass", "title": "theAttribute"}, document.getElementById("theParent"))
  

Я сохранил одно из ваших первоначальных требований: добавьте узел к какому-нибудь другому элементу, а также верните его.

Мне особенно нравится второй пример Робга с фрагментом. Определенно, я бы попробовал это, если бы использовал простые строки для представления HTML.

Если это не оправдывает прецедент, не всегда имеет смысл импортировать JS framework. jQuery не является исключением. Если вы решите, что необходимы более сложные рабочие процессы, это ваша гарантия! 😉