Hướng dẫn how to convert string html to html element? - làm cách nào để chuyển đổi chuỗi html thành phần tử html?

Có cách nào để chuyển đổi HTML như:

Hoặc bất kỳ chuỗi HTML nào khác vào phần tử DOM? (Để tôi có thể sử dụng appendChild ()). Tôi biết rằng tôi có thể làm .innerhtml và .innertext, nhưng đó không phải là điều tôi muốn - tôi thực sự muốn có khả năng chuyển đổi chuỗi HTML động thành một phần tử DOM để tôi có thể chuyển nó trong một .AppendChild ().

Cập nhật: Dường như có sự nhầm lẫn. Tôi có nội dung HTML trong một chuỗi, như một giá trị của một biến trong javascript. Không có nội dung HTML trong tài liệu.

Dednplicator

43.7K6 Huy hiệu vàng63 Huy hiệu bạc112 Huy hiệu đồng6 gold badges63 silver badges112 bronze badges

hỏi ngày 23 tháng 6 năm 2010 lúc 17:23Jun 23, 2010 at 17:23

2

Bạn có thể sử dụng

var xmlString = "
Link
";
var doc = new DOMParser().parseFromString(xmlString, "text/xml");
console.log(doc.firstChild.innerHTML); // => Link...
console.log(doc.firstChild.firstChild.innerHTML); // => Link

var xmlString = "
Link
";
var doc = new DOMParser().parseFromString(xmlString, "text/xml");
console.log(doc.firstChild.innerHTML); // => Link...
console.log(doc.firstChild.firstChild.innerHTML); // => Link

Đã trả lời ngày 23 tháng 6 năm 2010 lúc 17:58Jun 23, 2010 at 17:58

Maericsmaericsmaerics

Huy hiệu vàng 147K4444 gold badges261 silver badges288 bronze badges

17

Bạn thường tạo một yếu tố cha mẹ tạm thời mà bạn có thể viết

var xmlString = "
Link
";
var doc = new DOMParser().parseFromString(xmlString, "text/xml");
console.log(doc.firstChild.innerHTML); // => Link...
console.log(doc.firstChild.firstChild.innerHTML); // => Link

var wrapper= document.createElement('div');
wrapper.innerHTML= '
';
var div= wrapper.firstChild;

Nếu phần tử có hTML bên ngoài mà bạn có là một

var xmlString = "
Link
";
var doc = new DOMParser().parseFromString(xmlString, "text/xml");
console.log(doc.firstChild.innerHTML); // => Link...
console.log(doc.firstChild.firstChild.innerHTML); // => Link

var xmlString = "
Link
";
var doc = new DOMParser().parseFromString(xmlString, "text/xml");
console.log(doc.firstChild.innerHTML); // => Link...
console.log(doc.firstChild.firstChild.innerHTML); // => Link

var wrapper= document.createElement('div');
wrapper.innerHTML= '
';
var div= wrapper.firstChild;

Nhưng IE không thể viết

var xmlString = "
Link
";
var doc = new DOMParser().parseFromString(xmlString, "text/xml");
console.log(doc.firstChild.innerHTML); // => Link...
console.log(doc.firstChild.firstChild.innerHTML); // => Link

var wrapper= document.createElement('div');
wrapper.innerHTML= '
';
var div= wrapper.firstChild;

var wrapper= document.createElement('div');
wrapper.innerHTML= '
';
var div= wrapper.firstChild;

Đã trả lời ngày 23 tháng 6 năm 2010 lúc 18:00Jun 23, 2010 at 18:00

Bobincebobincebobince

520K103 Huy hiệu vàng648 Huy hiệu bạc827 Huy hiệu đồng103 gold badges648 silver badges827 bronze badges

8

Tại sao không sử dụng insertadjacenthtml

Ví dụ:

// 
one
 
var d1 = document.getElementById('one'); 
d1.insertAdjacentHTML('afterend', '
two
');

// At this point, the new structure is:
// 
one
two
here

Đã trả lời ngày 8 tháng 10 năm 2013 lúc 7:29Oct 8, 2013 at 7:29

Ram yram yRam Y

1.83417 Huy hiệu bạc21 Huy hiệu đồng17 silver badges21 bronze badges

2

Kiểm tra trình phân tích cú pháp HTML Pure JavaScript Pure của John Resig.

Chỉnh sửa: Nếu bạn muốn trình duyệt phân tích HTML cho bạn,

var xmlString = "
Link
";
var doc = new DOMParser().parseFromString(xmlString, "text/xml");
console.log(doc.firstChild.innerHTML); // => Link...
console.log(doc.firstChild.firstChild.innerHTML); // => Link

7 chính xác là những gì bạn muốn. Từ câu hỏi này:

var tempDiv = document.createElement('div');
tempDiv.innerHTML = htmlString;

Đã trả lời ngày 23 tháng 6 năm 2010 lúc 17:57Jun 23, 2010 at 17:57

oriporiporip

71.2K21 Huy hiệu vàng118 Huy hiệu bạc147 Huy hiệu đồng21 gold badges118 silver badges147 bronze badges

2

Được rồi, tôi nhận ra câu trả lời, sau khi tôi phải suy nghĩ về câu trả lời của người khác. :P

var htmlContent = ... // a response via AJAX containing HTML
var e = document.createElement('div');
e.setAttribute('style', 'display: none;');
e.innerHTML = htmlContent;
document.body.appendChild(e);
var htmlConvertedIntoDom = e.lastChild.childNodes; // the HTML converted into a DOM element :), now let's remove the
document.body.removeChild(e);

Đã trả lời ngày 23 tháng 6 năm 2010 lúc 18:00Jun 23, 2010 at 18:00

BobincebobinceTower

520K103 Huy hiệu vàng648 Huy hiệu bạc827 Huy hiệu đồng126 gold badges348 silver badges504 bronze badges

1

Tại sao không sử dụng insertadjacenthtml

var uiHelper = function () {

var htmls = {};

var getHTML = function (url) {
                /// 
Returns HTML in a string format
                /// The url to the file with the HTML

    if (!htmls[url])
    {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.open("GET", url, false);
    xmlhttp.send();
    htmls[url] = xmlhttp.responseText;
     };
     return htmls[url];
    };

        return {
            getHTML: getHTML
        };
}();

Ví dụ:

String.prototype.toDomElement = function () {

        var wrapper = document.createElement('div');
        wrapper.innerHTML = this;
        var df= document.createDocumentFragment();
        return df.addChilds(wrapper.children);
};

Đã trả lời ngày 8 tháng 10 năm 2013 lúc 7:29

HTMLElement.prototype.addChilds = function (newChilds) {
        /// 
Add an array of child elements
        /// Array of HTMLElements to add to this HTMLElement
        /// 
        for (var i = 0; i < newChilds.length; i += 1) { this.appendChild(newChilds[i]); };
        return this;
};

--Usage

 thatHTML = uiHelper.getHTML('/Scripts/elevation/ui/add/html/add.txt').toDomElement();

Ram yram yDec 27, 2013 at 20:27

5

1.83417 Huy hiệu bạc21 Huy hiệu đồng

var xmlString = "
Link
";
var doc = new DOMParser().parseFromString(xmlString, "text/xml");
console.log(doc.firstChild.innerHTML); // => Link...
console.log(doc.firstChild.firstChild.innerHTML); // => Link

var xmlString = "
Link
";
var doc = new DOMParser().parseFromString(xmlString, "text/xml");
console.log(doc.firstChild.innerHTML); // => Link...
console.log(doc.firstChild.firstChild.innerHTML); // => Link

var xmlString = "
Link
";
var doc = new DOMParser().parseFromString(xmlString, "text/xml");
console.log(doc.firstChild.innerHTML); // => Link...
console.log(doc.firstChild.firstChild.innerHTML); // => Link

var xmlString = "
Link
";
var doc = new DOMParser().parseFromString(xmlString, "text/xml");
console.log(doc.firstChild.innerHTML); // => Link...
console.log(doc.firstChild.firstChild.innerHTML); // => Link

2

Đã trả lời ngày 23 tháng 6 năm 2010 lúc 17:57Jun 23, 2010 at 17:31

oriporipSarfraz

71.2K21 Huy hiệu vàng118 Huy hiệu bạc147 Huy hiệu đồng76 gold badges529 silver badges576 bronze badges

5

Được rồi, tôi nhận ra câu trả lời, sau khi tôi phải suy nghĩ về câu trả lời của người khác. :P

var xmlString = "
Link
";
var doc = new DOMParser().parseFromString(xmlString, "text/xml");
console.log(doc.firstChild.innerHTML); // => Link...
console.log(doc.firstChild.firstChild.innerHTML); // => Link

var xmlString = "
Link
";
var doc = new DOMParser().parseFromString(xmlString, "text/xml");
console.log(doc.firstChild.innerHTML); // => Link...
console.log(doc.firstChild.firstChild.innerHTML); // => Link

var xmlString = "
Link
";
var doc = new DOMParser().parseFromString(xmlString, "text/xml");
console.log(doc.firstChild.innerHTML); // => Link...
console.log(doc.firstChild.firstChild.innerHTML); // => Link

5

Đã trả lời ngày 27 tháng 12 năm 2013 lúc 20:27Oct 28 at 18:03