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

6, như vậy:

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

7, sau đó trích xuất nội dung:

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

8 đơn giản như ở đây, thì điều này thật dễ dàng. Nếu nó có thể là một cái gì đó khác không thể đi bất cứ nơi nào, bạn có thể gặp nhiều vấn đề hơn. Ví dụ: nếu đó là

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

9, bạn sẽ phải có trình bao bọc cha mẹ là

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

0.

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

7 về các yếu tố như

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

2 vì vậy nếu bạn có

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

3, bạn sẽ phải bọc toàn bộ chuỗi HTML trong ____ ____ 24 ... xuống.

Đã 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

0

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

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

1

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 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

3

TowertowerMay 3, 2013 at 0:08

95,8K126 Huy hiệu vàng348 Huy hiệu bạc 504 Huy hiệu đồngwilliam malo

Đây là một mã nhỏ hữu ích.2 gold badges17 silver badges18 bronze badges

-Chuyển đổi chuỗi HTML thành phần tử DOM

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

4

-Người trợ giúp kiểu mẫu

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