javascript - 使用内置DOM方法或原型从HTML字符串创建新的DOM元素(Creating a new DOM element from an HTML string using built-in DOM methods or Prototype)

Question

I have an HTML string representing an element: '<li>text</li>' .

(我有一个表示元素的HTML字符串： '<li>text</li>' 。)

I'd like to append it to an element in the DOM (a ul in my case).

(我想将其附加到DOM中的元素（以我的情况为ul ）。)

How can I do this with Prototype or with DOM methods?

(如何使用Prototype或DOM方法做到这一点？)

(I know i could do this easily in jQuery, but unfortunately we're not using jQuery.)

(（我知道我可以在jQuery中轻松完成此操作，但不幸的是，我们没有使用jQuery。）)

  ask by Omer Bokhari translate from so

Answer 1

Note: most current browsers support HTML <template> elements, which provide a more reliable way of turning creating elements from strings.

(注意：当前大多数浏览器都支持HTML <template>元素，该元素提供了一种更可靠的方式来转换从字符串创建元素的方式。)

See Mark Amery's answer below for details .

(有关详细信息，请参见下面的Mark Amery的答案 。)

For older browsers, and node/jsdom : (which doesn't yet support <template> elements at the time of writing), use the following method.

(对于较旧的浏览器和node / jsdom ：（在撰写本文时尚不支持<template>元素），请使用以下方法。)

It's the same thing the libraries use to do to get DOM elements from an HTML string ( with some extra work for IE to work around bugs with its implementation of innerHTML ):

(库用于从HTML字符串中获取DOM元素的方法是相同的（ IE还要做一些额外的工作来解决innerHTML实现的错误）：)

function createElementFromHTML(htmlString) {
  var div = document.createElement('div');
  div.innerHTML = htmlString.trim();

  // Change this to div.childNodes to support multiple top-level nodes
  return div.firstChild; 
}

Note that unlike HTML templates this won't work for some elements that cannot legally be children of a <div> , such as <td> s.

(请注意，与HTML模板不同，这不适用于某些不能合法地成为<div>子元素的元素，例如<td> 。)

If you're already using a library, I would recommend you stick to the library-approved method of creating elements from HTML strings:

(如果您已经在使用库，建议您坚持使用库批准的从HTML字符串创建元素的方法：)

• Prototype has this feature built-into its update() method .

  (原型在其update()方法中内置了此功能。)

• jQuery has it implemented in its jQuery(html) and jQuery.parseHTML methods.

  (jQuery在其jQuery(html)和jQuery.parseHTML方法中实现了它。)