Chèn các phần tử HTML bằng JavaScript

Thay vì tốn công tìm kiếm các giải pháp thay thế cho từng loại thuộc tính và sự kiện khi sử dụng cú pháp sau:

elem = document.createElement("div");
elem.id = 'myID';
elem.innerHTML = ' my Text '
document.body.insertBefore(elem,document.body.childNodes[0]);

Có cách nào để tôi có thể khai báo toàn bộ phần tử HTML dưới dạng một chuỗi không? giống:

elem = document.createElement("<div id='myID'> my Text </div>");
document.body.insertBefore(elem,document.body.childNodes[0]);

Thay vì trực tiếp làm rối innerHTMLnó có thể tốt hơn là tạo một phân đoạn và sau đó chèn:

function create(htmlStr) {
    var frag = document.createDocumentFragment(),
        temp = document.createElement('div');
    temp.innerHTML = htmlStr;
    while (temp.firstChild) {
        frag.appendChild(temp.firstChild);
    }
    return frag;
}

var fragment = create('<div>Hello!</div><p>...</p>');
// You can use native DOM methods to insert the fragment:
document.body.insertBefore(fragment, document.body.childNodes[0]);

Những lợi ích:

1. Bạn có thể sử dụng các phương thức DOM gốc để chèn như insertBefore, appendChild, v.v.
2. Bạn có quyền truy cập vào các nút DOM thực tế trước khi chúng được chèn vào; bạn có thể truy cập đối tượng childNodes của mảnh.
3. Sử dụng các đoạn tài liệu rất nhanh chóng; nhanh hơn việc tạo các phần tử bên ngoài DOM và trong một số trường hợp nhất định nhanh hơn innerHTML.

Mặc dù innerHTMLđược sử dụng trong hàm, tất cả đều diễn ra bên ngoài DOM nên nó nhanh hơn nhiều so với bạn nghĩ ...

Bạn muốn điều này

document.body.insertAdjacentHTML( 'afterbegin', '<div id="myID">...</div>' );

Hãy xem insertAdjacentHTML

var element = document.getElementById("one");
var newElement = '<div id="two">two</div>'
element.insertAdjacentHTML( 'afterend', newElement )
// new DOM structure: <div id="one">one</div><div id="two">two</div>

vị trí là vị trí liên quan đến phần tử bạn đang chèn bên cạnh:

'beforebegin' Trước chính phần tử

'afterbegin' Ngay bên trong phần tử, trước phần tử con đầu tiên của nó

'beforeend' Ngay bên trong phần tử, sau phần tử cuối cùng của nó

'afterend' Sau chính phần tử

Trong JavaScript trường cũ, bạn có thể làm điều này:

document.body.innerHTML = '<p id="foo">Some HTML</p>' + document.body.innerHTML;

Để trả lời bình luận của bạn:

[...] Tôi quan tâm đến việc khai báo nguồn của các thuộc tính và sự kiện của phần tử mới, không phải innerHTMLcủa một phần tử.

Tuy nhiên, bạn cần đưa HTML mới vào DOM; đó là lý do tại sao innerHTMLđược sử dụng trong ví dụ JavaScript trường học cũ. Các innerHTMLcủaBODY phần tử được thêm vào phía trước với HTML mới. Chúng tôi không thực sự chạm vào HTML hiện có bên trongBODY .

Tôi sẽ viết lại ví dụ nói trên để làm rõ điều này:

var newElement = '<p id="foo">This is some dynamically added HTML. Yay!</p>';
var bodyElement = document.body;
bodyElement.innerHTML = newElement + bodyElement.innerHTML;
// note that += cannot be used here; this would result in 'NaN'

Sử dụng khung JavaScript sẽ làm cho mã này ít dài dòng hơn nhiều và cải thiện khả năng đọc. Ví dụ: jQuery cho phép bạn thực hiện những việc sau:

$('body').prepend('<p id="foo">Some HTML</p>');

Theo hiểu biết của tôi, công bằng mà nói, nó khá mới và hạn chế, vấn đề tiềm ẩn duy nhất với kỹ thuật này là thực tế là bạn bị ngăn cản việc tạo động một số phần tử bảng.

Tôi sử dụng một biểu mẫu để tạo mẫu bằng cách thêm các phần tử "mẫu" vào một DIV ẩn và sau đó sử dụng cloneNode (true) để tạo một bản sao và gắn nó theo yêu cầu. Lưu ý rằng bạn cần đảm bảo bạn chỉ định lại id theo yêu cầu để tránh trùng lặp.

Như những người khác nói rằng thuận tiện jQuery thêm vào trước chức năng có thể được mô phỏng:

var html = '<div>Hello prepended</div>';
document.body.innerHTML = html + document.body.innerHTML;

Trong khi một số người nói rằng tốt hơn là không nên "gây rối" với innerHTML , nó đáng tin cậy trong nhiều trường hợp sử dụng, nếu bạn biết điều này:

Nếu a <div>, <span>hoặc <noembed>nút có một nút văn bản con bao gồm các ký tự (& ), ( <) hoặc ( >), thì innerHTML trả về các ký tự này dưới dạng &amp, &ltvà &gttương ứng. Sử dụng Node.textContentđể có được một bản sao chính xác nội dung của các nút văn bản này.

https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML

Hoặc là:

var html = '<div>Hello prepended</div>';
document.body.insertAdjacentHTML('afterbegin', html)

insertAdjacentHTMLcó lẽ là một giải pháp thay thế tốt: https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

Nếu bạn muốn chèn mã HTML bên trong thẻ của trang hiện có, hãy sử dụng Jnerator . Công cụ này được tạo ra đặc biệt cho mục tiêu này.

Thay vì viết mã tiếp theo

    var htmlCode = '<ul class=\'menu-countries\'><li
        class=\'item\'><img src=\'au.png\'></img><span>Australia </span></li><li
        class=\'item\'><img src=\'br.png\'> </img><span>Brazil</span></li><li
        class=\'item\'> <img src=\'ca.png\'></img><span>Canada</span></li></ul>';
    var element = document.getElementById('myTag');
    element.innerHTML = htmlCode;

Bạn có thể viết cấu trúc dễ hiểu hơn

    var jtag = $j.ul({
        class: 'menu-countries',
        child: [
            $j.li({ class: 'item', child: [
                $j.img({ src: 'au.png' }),
                $j.span({ child: 'Australia' })
            ]}),
            $j.li({ class: 'item', child: [
                $j.img({ src: 'br.png' }),
                $j.span({ child: 'Brazil' })
            ]}),
            $j.li({ class: 'item', child: [
                $j.img({ src: 'ca.png' }),
                $j.span({ child: 'Canada' })
            ]})
        ]
    });
    var htmlCode = jtag.html();
    var element = document.getElementById('myTag');
    element.innerHTML = htmlCode;