Hướng dẫn vanilla js add html to element - vani js thêm html vào phần tử

Hôm qua, chúng tôi đã xem xét bốn cách để đưa văn bản và HTML vào DOM với Vanilla JS. Hôm nay, chúng tôi sẽ nhìn vào năm người nữa.

Nào cùng đào vào bên trong!

Phương pháp let chicken = document.createElement('chicken'); // let placeholder = document.createElement('_'); // <_> 2

Bạn có thể sử dụng phương thức

let chicken = document.createElement('chicken'); // 
let placeholder = document.createElement('_'); // <_>

let chicken = document.createElement('chicken'); // 
let placeholder = document.createElement('_'); // <_>

let div = document.createElement('div');
let link = document.createElement('a');
let article = document.createElement('article');

Bạn có thể sử dụng bất kỳ thẻ HTML hợp lệ nào và thậm chí cũng tạo các thẻ tùy chỉnh. Ví dụ, những thứ này cũng hoạt động.

let chicken = document.createElement('chicken'); // 
let placeholder = document.createElement('_'); // <_>

Bạn có thể thao tác một phần tử được tạo bằng

let chicken = document.createElement('chicken'); // 
let placeholder = document.createElement('_'); // <_>

let div = document.createElement('div');
div.textContent = 'Hello, world!';
div.className = 'new-div';
div.id = 'new-div';
div.setAttribute('data-div', 'new');
div.style.color = '#fff';
div.style.backgroundColor = 'rebeccapurple';

Ở đây, một bản demo của phương pháp

let chicken = document.createElement('chicken'); // 
let placeholder = document.createElement('_'); // <_>

Phương pháp let chicken = document.createElement('chicken'); // let placeholder = document.createElement('_'); // <_> 7

Phương thức

let chicken = document.createElement('chicken'); // 
let placeholder = document.createElement('_'); // <_>

let chicken = document.createElement('chicken'); // 
let placeholder = document.createElement('_'); // <_>

<div id="app">Good eveningdiv>

// Create a new element
let p = document.createElement('p');
p.textContent = 'Hello!';

// Get the target node
let app = document.querySelector('#app');

// Insert the new node before the target node
// 
Hello!
Good evening
app.before(p);

// You can inject more than one item by passing in multiple arguments
// 
Hello!
What's poppin'
Good evening
app.before(p, `What's poppin?`);

Ở đây, một bản demo của phương pháp

let chicken = document.createElement('chicken'); // 
let placeholder = document.createElement('_'); // <_>

Phương pháp let div = document.createElement('div'); div.textContent = 'Hello, world!'; div.className = 'new-div'; div.id = 'new-div'; div.setAttribute('data-div', 'new'); div.style.color = '#fff'; div.style.backgroundColor = 'rebeccapurple'; 1

Phương thức

let div = document.createElement('div');
div.textContent = 'Hello, world!';
div.className = 'new-div';
div.id = 'new-div';
div.setAttribute('data-div', 'new');
div.style.color = '#fff';
div.style.backgroundColor = 'rebeccapurple';

let div = document.createElement('div');
div.textContent = 'Hello, world!';
div.className = 'new-div';
div.id = 'new-div';
div.setAttribute('data-div', 'new');
div.style.color = '#fff';
div.style.backgroundColor = 'rebeccapurple';

<div id="app">Good morningdiv>

// Create a new element
let p = document.createElement('p');
p.textContent = 'Hello!';

// Get the target node
let app = document.querySelector('#app');

// Insert the new node after the target node
// 
Good morning
Hello!
app.after(p);

// You can inject more than one item by passing in multiple arguments
// 
Good morning
Hello!
What's poppin'
app.after(p, `What's poppin?`);

Ở đây, một bản demo của phương pháp

let div = document.createElement('div');
div.textContent = 'Hello, world!';
div.className = 'new-div';
div.id = 'new-div';
div.setAttribute('data-div', 'new');
div.style.color = '#fff';
div.style.backgroundColor = 'rebeccapurple';

Phương pháp let div = document.createElement('div'); div.textContent = 'Hello, world!'; div.className = 'new-div'; div.id = 'new-div'; div.setAttribute('data-div', 'new'); div.style.color = '#fff'; div.style.backgroundColor = 'rebeccapurple'; 5

Bạn có thể sử dụng phương thức

let div = document.createElement('div');
div.textContent = 'Hello, world!';
div.className = 'new-div';
div.id = 'new-div';
div.setAttribute('data-div', 'new');
div.style.color = '#fff';
div.style.backgroundColor = 'rebeccapurple';

let div = document.createElement('div');
div.textContent = 'Hello, world!';
div.className = 'new-div';
div.id = 'new-div';
div.setAttribute('data-div', 'new');
div.style.color = '#fff';
div.style.backgroundColor = 'rebeccapurple';

<ul id="list">
	<li>Item 1li>
	<li>Item 2li>
	<li>Item 3li>
ul>

// Create a new element
let li = document.createElement('li');
li.textContent = 'I am new here.';

// Create another new element
let liToo = document.createElement('li');
liToo.textContent = `I'm new, too!`;

// Get the parent node
let list = document.querySelector('#list');

// Insert the new node after the last element in the parent node
// ...
Item 3
I am new here.
list.append(li);

// You can inject more than one item by passing in multiple arguments
// ...
Item 3
I am new here.
I'm new, too!
list.append(li, liToo);

Ở đây, một bản demo của phương pháp

let div = document.createElement('div');
div.textContent = 'Hello, world!';
div.className = 'new-div';
div.id = 'new-div';
div.setAttribute('data-div', 'new');
div.style.color = '#fff';
div.style.backgroundColor = 'rebeccapurple';

Phương pháp let div = document.createElement('div'); div.textContent = 'Hello, world!'; div.className = 'new-div'; div.id = 'new-div'; div.setAttribute('data-div', 'new'); div.style.color = '#fff'; div.style.backgroundColor = 'rebeccapurple'; 9

Bạn có thể sử dụng phương thức

let div = document.createElement('div');
div.textContent = 'Hello, world!';
div.className = 'new-div';
div.id = 'new-div';
div.setAttribute('data-div', 'new');
div.style.color = '#fff';
div.style.backgroundColor = 'rebeccapurple';

let div = document.createElement('div');
div.textContent = 'Hello, world!';
div.className = 'new-div';
div.id = 'new-div';
div.setAttribute('data-div', 'new');
div.style.color = '#fff';
div.style.backgroundColor = 'rebeccapurple';

<ul id="list">
	<li>Item 1li>
	<li>Item 2li>
	<li>Item 3li>
ul>

let chicken = document.createElement('chicken'); // 
let placeholder = document.createElement('_'); // <_>

Ở đây, một bản demo của phương pháp

let div = document.createElement('div');
div.textContent = 'Hello, world!';
div.className = 'new-div';
div.id = 'new-div';
div.setAttribute('data-div', 'new');
div.style.color = '#fff';
div.style.backgroundColor = 'rebeccapurple';

Phương pháp

Good evening

3

Phương thức

<div id="app">Good eveningdiv>

<div id="app">Good eveningdiv>

let chicken = document.createElement('chicken'); // 
let placeholder = document.createElement('_'); // <_>

Ở đây, một bản demo của phương pháp

<div id="app">Good eveningdiv>