Native JS DOM manipulation
<div class="layout" id="layout">
<div id="item1" class="item1">1</div>
<div id="item2" class="item2">2</div>
<div class="item1">3</div>
<input type="text" name="input">
</div>
Copy the code
Create the element
document.createElement(‘div’)
Document.createtextnode (‘ createTextNode ‘)
document.createDocumentFragment()
Get elements:
document.getElementById(‘layout’); // Obtain by id
document.etElementsByClass(‘layout’); // Get by class name
document.getElementsByTagName(); // By the tag name
document.getElementsByName(‘input’); (Only elements with a name attribute (form elements) can be retrieved by the name attribute)
document.querySelector(‘.item1’); // According to the selector
document.querySelectorAll(‘.item1’);
document.documentElement; // Get the HTML tag
document.body; // Get the body tag
Operation elements:
const parentNode = document.getElementById('layout')
const createNode = document.createElement('div')
createNode.innerHTML = 'Create new node'
const oldNode = document.querySelector('.item1')
Copy the code