Hướng dẫn convert object to html - chuyển đổi đối tượng sang html

Tôi có một chuỗi HTML như thế này:

Nội dung chính ShowShow

• document.createElement
• Làm thế nào để chuyển đổi HTML sang DOM?
• Bạn có thể chuyển đổi HTML thành JavaScript không?
• Làm thế nào để chuyển đổi chuỗi HTML thành phần tử HTML?
• Làm thế nào để bạn tạo một chuỗi DOM?

<div id="foo">
    <h2 class="greeting">Hello World!</h2>
</div>

Tôi cần chuyển đổi chuỗi HTML này thành đối tượng trong JavaScript. tức là, tôi sẽ nhận được kết quả đối tượng tương tự khi sử dụng phương thức ____99 trong jQuery. Tôi đã thử một cái gì đó như thế này:

a = '<div id="foo">
    <h2 class="greeting">Hello World!</h2>
</div>';
eval("{"+a+"}");
console.log(a);

Nhưng nó không hoạt động. Tôi nên sử dụng phương pháp nào trong JavaScript để chuyển đổi chuỗi HTML thành ký hiệu đối tượng. Tôi nên lấy mỗi nút trẻ ở dạng đối tượng. Tôi không muốn sử dụng jQuery trong giải pháp này. Tôi đang mong đợi đầu ra chính xác như được hiển thị trong bảng điều khiển

Hỏi ngày 15 tháng 4 năm 2014 lúc 13:07Apr 15, 2014 at 13:07Apr 15, 2014 at 13:07

Ganesh Babuganesh BabuGanesh BabuGanesh Babu

3.53010 Huy hiệu vàng33 Huy hiệu bạc65 Huy hiệu Đồng10 gold badges33 silver badges65 bronze badges10 gold badges33 silver badges65 bronze badges

9

Trong hình ảnh, nó là một đối tượng jQuery mà bạn có thể tạo bằng mã sau

var a = '<div id="foo">\
    <h2 class="greeting">Hello World!</h2>\
</div>';
var aDom = jQuery(a);
console.log(aDom );

JavaScript thuần túy: JSfiddle

var e = document.createElement("div");
e.id = "foo";
e.innerHTML = '<h2 class="greeting">Hello World!</h2>';

console.log(e);

Đã trả lời ngày 15 tháng 4 năm 2014 lúc 13:24Apr 15, 2014 at 13:24Apr 15, 2014 at 13:24

AnoopanoopAnoopAnoop

22.7K10 Huy hiệu vàng61 Huy hiệu bạc71 Huy hiệu đồng10 gold badges61 silver badges71 bronze badges10 gold badges61 silver badges71 bronze badges

4

Đã chỉnh sửa

var a = '<div id="test"></div>';

var htmlObject = document.createElement('div');

htmlObject.innerHTML = a;

htmlObject.getElementById("test") = data;

Đã trả lời ngày 15 tháng 4 năm 2014 lúc 13:14Apr 15, 2014 at 13:14Apr 15, 2014 at 13:14

0

Bạn có muốn như thế này không

<script>
var htmlStrObj = {};
htmlStrObj.container = '<div id="foo"><h2 class="greeting">Hello World!</h2></div>';
console.log(htmlStrObj);
</script>

Đã trả lời ngày 15 tháng 4 năm 2014 lúc 13:16Apr 15, 2014 at 13:16Apr 15, 2014 at 13:16

AsikasikAsikAsik

7.9574 Huy hiệu vàng27 Huy hiệu bạc33 Huy hiệu đồng4 gold badges27 silver badges33 bronze badges4 gold badges27 silver badges33 bronze badges

0

Trong một số trường hợp, người ta sẽ muốn chuyển đổi chuỗi HTML thành các thành phần DOM để JavaScript có thể xử lý chúng một cách dễ dàng. Điều này thường được sử dụng khi người ta nhận được một số dữ liệu từ API của bên thứ ba trong đó dữ liệu ở định dạng HTML.

Trong JavaScript, có một vài cách người ta có thể sử dụng để chuyển đổi HTML thành các thành phần DOM.

• Domparser
• document.createElement

Domparser

Domparser & nbsp; có thể phân tích nguồn XML hoặc HTML được lưu trữ trong một chuỗi thành một DOM & NBSP; Document. & NBSP; Sau khi chuyển đổi, cuộc gọi JavaScript thông thường của các yếu tố xử lý DOM có thể được sử dụng, như nhận phần tử bằng ID hoặc sử dụng các bộ chọn.

Ví dụ: giả sử có chuỗi HTML & NBSP;

<div id="test_div">
	<ul>
		<li>Item 1</li>
		<li>Item 2</li>
		<li>Item 3</li>
	</ul>
</div>

Bây giờ nó có thể được phân tích cú pháp bằng mã dưới đây.

var html = '<div id="test_div"><ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul></div>';
var parser = new DOMParser();
var wrapper = parser.parseFromString(html, "text/html");
wrapper.getElementsByTagName('li');

Đầu ra trông như mong đợi, có & nbsp; ba đối tượng được trả về.

Một điều cần lưu ý là Domparser vẫn là một tính năng thử nghiệm và chưa được tiêu chuẩn hóa mặc dù nhiều trình duyệt luồng chính đã hỗ trợ nó. Và tính năng này không được hỗ trợ trong các trình duyệt cũ.

document.createElement

Một cách khác để chuyển đổi HTML sang DOM là sử dụng phương thức tài liệu truyền thống.CreateEement. Sau khi tạo phần tử, chuỗi HTML có thể được gán cho thuộc tính bên trong của phần tử và động cơ JS sẽ phân tích nó vào các phần tử con của phần tử được tạo.document.createElement method. After creating the element, the HTML string can be assigned to the innerHTML attribute of the element and the JS engine would parse it to the child elements of the created element.document.createElement method. After creating the element, the HTML string can be assigned to the innerHTML attribute of the element and the JS engine would parse it to the child elements of the created element.

Đối với cùng một chuỗi HTML ở trên, mã sử dụng tài liệu.createelement sẽ là

var html = '<div id="test_div"><ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul></div>';
var wrapper= document.createElement('div');
wrapper.innerHTML= html;
wrapper.getElementsByTagName('li');

Đầu ra cũng sẽ được mong đợi.

Lưu ý Khi cài đặt bên trong, nếu chuỗi chứa các phần tử như hình ảnh yêu cầu tải, chúng sẽ được tải vào thời gian phân tích. Điều này đôi khi sẽ không được mong đợi vì chúng có thể kích hoạt các kết nối mạng không cần thiết. Hoặc nó sẽ áp đặt rủi ro bảo mật tiềm năng nơi mã JavaScript độc hại sẽ được tải.

Thông thường, người ta nên sử dụng Domparser nếu anh ta có thể nhưng nếu ứng dụng cần hỗ trợ phiên bản cũ của trình duyệt, hai phương thức này nên được kết hợp và một phương thức trình bao sẽ được tạo trên đầu chúng.

Làm thế nào để chuyển đổi HTML sang DOM?

Kiểm tra điều này: stackoverflow.com/questions/494143/- - jhleath. Ngày 23 tháng 6 năm 2010 lúc 18:00 ..

Nếu bạn muốn một cái gì đó gần hơn html thay vì nút, tôi đề nghị sử dụng hàm sau;) dom.innerhtml = str; trả lại DOM; }; ` - La Pach '.

Bạn có thể chuyển đổi HTML thành JavaScript không?

Chèn văn bản HTML của bạn vào hộp văn bản bằng cách nhập nó hoặc cắt và dán.Sau đó, để chuyển đổi nó thành JavaScript có thể sử dụng trong tài liệu HTML, nhấp vào nút 'Chuyển đổi HTML -> JavaScript';Mã được chuyển đổi sẽ xuất hiện trong cùng một hộp.Nút 'Xóa văn bản' sẽ xóa mọi thứ trong hộp văn bản.click the 'Convert HTML -> JavaScript' button; the converted code will appear in the same box. The 'Clear Text' button will erase everything in the text box.click the 'Convert HTML -> JavaScript' button; the converted code will appear in the same box. The 'Clear Text' button will erase everything in the text box.

Làm thế nào để chuyển đổi chuỗi HTML thành phần tử HTML?

Phương thức parseFromString () của giao diện DomParser chuyển đổi một chuỗi chứa HTML và trả về dưới dạng htmldocument.Đầu ra: Bạn có thể thấy rằng chuỗi HTML được chuyển đổi thành phần tử HTML dưới dạng nút DOM.Bây giờ, bạn có thể sử dụng các phương thức của các nút dom như appendChild () để sử dụng kết quả.. OUTPUT: You can see that the HTML string is converted to an HTML element as a DOM node. Now, you can use the methods of DOM nodes like appendChild() to use the result.. OUTPUT: You can see that the HTML string is converted to an HTML element as a DOM node. Now, you can use the methods of DOM nodes like appendChild() to use the result.

Làm thế nào để bạn tạo một chuỗi DOM?

Cách tạo một phần tử DOM mới từ chuỗi HTML...

hàm htmlToelem (html) {.

Đặt TEMP = Tài liệu.createdeLement ..

html = html.trim ();// Không bao giờ trả lại nút văn bản không gian như là kết quả ..

nhiệt độ.Internhtml = html ;.

trả lại temp.....

Đặt td = htmlToelem ('foo'.

div = htmltoelem ('công cụ lồng nhau'.