jQuery document.createElement equivalent?

Question

I\'m refactoring some old JavaScript code and there\'s a lot of DOM manipulation going on.

var d = document;
var odv = d.createElement(\"div\");
odv.style.di         


        

Answer 1

Not mentioned in previous answers, so I'm adding working example how to create element elements with latest jQuery, also with additional attributes like content, class, or onclick callback:

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 = $('')
        .append($('', { text: id }))
        .append($('', {
          text: username,
          class: 'click-me',
          on: {
            click: _ => {
              console.log(name)
            }
          }
        }))
        .append($('', { text: email }))

      $tbody.append(row)
    })

  })
}

$button.on('click', loadAndRender)

.click-me {
  background-color: lightgrey
}

  

    

      
ID
      
Username
      
Email
    
  
  

  
  


Load and render