jQuery document.createElement эквивалент? - PullRequest
Новая
       36

jQuery document.createElement эквивалент?

1197 голосов
/ 06 ноября 2008

Я выполняю рефакторинг некоторого старого кода JavaScript, и происходит множество манипуляций с DOM. 

var d = document;
var odv = d.createElement("div");
odv.style.display = "none";
this.OuterDiv = odv;

var t = d.createElement("table");
t.cellSpacing = 0;
t.className = "text";
odv.appendChild(t);

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

var odv = $.create("div");
$.append(odv);
// And many more

Но я не уверен, что это лучше.

Ответы [ 13 ]

5 голосов
/ 25 мая 2010

Все довольно просто! Вот пара быстрых примеров ... 

var $example = $( XMLDocRoot );

var $element = $( $example[0].createElement('tag') );
// Note the [0], which is the root

$element.attr({
id: '1',
hello: 'world'
});

var $example.find('parent > child').append( $element );
0 голосов
/ 24 мая 2019

Не упоминается в предыдущих ответах, поэтому я добавляю рабочий пример, как создавать элементы элемента с последним jQuery, также с дополнительными атрибутами, такими как callback-функции content, class или onclick: 

const mountpoint = 'https://jsonplaceholder.typicode.com/users'

const $button = $('button')
const $tbody = $('tbody')

const loadAndRender = () => {
  $.getJSON(mountpoint).then(data => {

    $.each(data, (index, { id, username, name, email }) => {
      let row = $('<tr>')
        .append($('<td>', { text: id }))
        .append($('<td>', {
          text: username,
          class: 'click-me',
          on: {
            click: _ => {
              console.log(name)
            }
          }
        }))
        .append($('<td>', { text: email }))

      $tbody.append(row)
    })

  })
}

$button.on('click', loadAndRender)
.click-me {
  background-color: lightgrey
}
<table style="width: 100%">
  <thead>
    <tr>
      <th>ID</th>
      <th>Username</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
  
  </tbody>
</table>

<button>Load and render</button>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
0 голосов
/ 06 ноября 2008

jQuery из коробки не имеет эквивалента createElement. Фактически большая часть работы jQuery выполняется внутренне с использованием innerHTML, а не чисто DOM-манипуляций. Как уже упоминал Адам, это то, как вы можете достичь подобных результатов.

Также доступны плагины, которые используют DOM вместо innerHTML, например appendDOM , DOMEC и FlyDOM , и это лишь некоторые из них. С точки зрения производительности нативный jquery по-прежнему наиболее производительный (в основном потому, что он использует innerHTML)

Страница:
...