Thêm yếu tố HTML với JavaScript

Question

Vì vậy, nếu tôi có HTML như thế này:

<div id='div'> 
    <a>Link</a> 

    <span>text</span> 
</div> 

Làm thế nào tôi có thể sử dụng JavaScript để thêm một phần tử HTML nơi mà dòng trống là gì?

Answer 1

Như các bạn đã không đề cập đến việc sử dụng các thư viện javascript (như jquery, võ đường), đây là một cái gì đó tinh khiết javascript.

var txt = document.createTextNode(" This text was added to the DIV."); 
var parent = document.getElementById('div'); 
parent.insertBefore(txt, parent.lastChild); 

hoặc

var link = document.createElement('a'); 
link.setAttribute('href', 'mypage.htm'); 
var parent = document.getElementById('div'); 
parent.insertAfter(link, parent.firstChild); 

Chúc mừng Mã hóa.

Answer 2

Nếu bạn muốn sử dụng cái gì đó như jQuery bạn có thể làm một cái gì đó như thế này:

$('#div a').after("Your html element"); 

Answer 3

jQuery có một tốt đẹp, được xây dựng trong chức năng cho điều này: sau khi(), tại http://api.jquery.com/after/

Trong trường hợp của bạn, có thể bạn sẽ muốn có một bộ chọn như thế này:

$('#div a').after('<p>html element to add</p>'); 

Các ví dụ mã từ liên kết đưa ra ở trên cũng cho thấy làm thế nào để tải jQuery nếu đó là mới cho bạn.

Answer 4

Giả sử rằng bạn chỉ thêm một phần tử:

document.getElementById("div").insertBefore({Element}, document.getElementById("div").children[2]); 

Answer 5

Thay vì đối phó với trẻ em 's <div>, giống như câu trả lời khác, nếu bạn biết bạn luôn muốn chèn sau khi các yếu tố <a>, cung cấp cho nó một ID, và sau đó bạn có thể chèn liên quan đến anh chị em của nó:

<div id="div"> 
    <a id="div_link">Link</a> 

    <span>text</span> 
</div> 

và sau đó chèn yếu tố mới của bạn trực tiếp sau khi yếu tố đó:

var el = document.createElement(element_type); // where element_type is the tag name you want to insert 
// ... set element properties as necessary 

var div = document.getElementById('div'); 
var div_link = document.getElementById('div_link'); 
var next_sib = div_link.nextSibling; 

if (next_sib) 
{ 
    // if the div_link has another element following it within the link, insert 
    // before that following element 
    div.insertBefore(el, next_sib); 
} 
else 
{ 
    // otherwise, the link is the last element in your div, 
    // so just append to the end of the div 
    div.appendChild(el); 
} 

Điều này sẽ cho phép bạn luôn đảm bảo phần tử mới của bạn theo liên kết.

Answer 6

node = document.getElementById('YourID'); 
node.insertAdjacentHTML('afterend', '<div>Sample Div</div>'); 

sẵn Tùy chọn

beforebegin, afterbegin, beforeend, afterend