Tôi có một chuỗi HTML đại diện cho một yếu tố : '<li>text</li>'. Tôi muốn nối nó với một phần tử trong DOM ( ultrong trường hợp của tôi). Làm thế nào tôi có thể làm điều này với Prototype hoặc với các phương thức DOM?

(Tôi biết tôi có thể làm điều này một cách dễ dàng trong jQuery, nhưng tiếc là chúng tôi không sử dụng jQuery.)

Lưu ý: hầu hết các trình duyệt hiện tại đều hỗ trợ <template>các phần tử HTML , cung cấp một cách đáng tin cậy hơn để chuyển các phần tử tạo từ chuỗi. Xem câu trả lời của Mark Amery bên dưới để biết chi tiết .

Đối với các trình duyệt cũ hơn và nút / jsdom : (chưa hỗ trợ <template>các phần tử tại thời điểm viết), hãy sử dụng phương pháp sau. Đó là điều tương tự mà các thư viện sử dụng để lấy các phần tử DOM từ một chuỗi HTML ( với một số công việc bổ sung cho IE để khắc phục các lỗi khi triển khai 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; 
}

Lưu ý rằng không giống như các mẫu HTML, điều này sẽ không hoạt động đối với một số thành phần không thể là con của một cách hợp pháp <div>, chẳng hạn như <td>s.

Nếu bạn đang sử dụng thư viện, tôi khuyên bạn nên sử dụng phương pháp tạo phần tử được thư viện phê duyệt:

• Nguyên mẫu có tính năng này được tích hợp vào update()phương thức của nó .
• jQuery đã thực hiện theo các phương thức jQuery(html)và jQuery.parseHTMLphương thức của nó .

HTML 5 đã giới thiệu <template>phần tử có thể được sử dụng cho mục đích này (như được mô tả trong thông số WhatWG và tài liệu MDN ).

Một <template>phần tử được sử dụng để khai báo các đoạn HTML có thể được sử dụng trong các tập lệnh. Phần tử được biểu diễn trong DOM dưới dạng HTMLTemplateElementcó .contentthuộc tính DocumentFragmentloại, để cung cấp quyền truy cập vào nội dung của mẫu. Đây có nghĩa là bạn có thể chuyển đổi một chuỗi HTML để phần tử DOM bằng cách thiết lập innerHTMLcủa một <template>phần tử, sau đó đạt vào template's .contenttài sản.

Ví dụ:

/**
 * @param {String} HTML representing a single element
 * @return {Element}
 */
function htmlToElement(html) {
    var template = document.createElement('template');
    html = html.trim(); // Never return a text node of whitespace as the result
    template.innerHTML = html;
    return template.content.firstChild;
}

var td = htmlToElement('<td>foo</td>'),
    div = htmlToElement('<div><span>nested</span> <span>stuff</span></div>');

/**
 * @param {String} HTML representing any number of sibling elements
 * @return {NodeList} 
 */
function htmlToElements(html) {
    var template = document.createElement('template');
    template.innerHTML = html;
    return template.content.childNodes;
}

var rows = htmlToElements('<tr><td>foo</td></tr><tr><td>bar</td></tr>');

Lưu ý rằng các cách tiếp cận tương tự sử dụng một yếu tố chứa khác nhau, chẳng hạn nhưdiv không hoạt động. HTML có các hạn chế về loại phần tử nào được phép tồn tại bên trong loại phần tử khác; ví dụ, bạn không thể đặt con tdlà con trực tiếp của a div. Điều này làm cho các phần tử này biến mất nếu bạn cố gắng đặt phần innerHTMLtử divchứa chúng. Vì <template>không có hạn chế nào đối với nội dung của chúng, thiếu sót này không áp dụng khi sử dụng mẫu.

Tuy nhiên, templatekhông được hỗ trợ trong một số trình duyệt cũ. Kể từ tháng 1 năm 2018, tôi có thể sử dụng ... ước tính 90% người dùng trên toàn cầu đang sử dụng trình duyệt hỗ trợ templates . Đặc biệt, không có phiên bản Internet Explorer nào hỗ trợ chúng; Microsoft đã không thực hiện templatehỗ trợ cho đến khi phát hành Edge.

Nếu bạn đủ may mắn để viết mã chỉ nhắm mục tiêu vào người dùng trên các trình duyệt hiện đại, hãy tiếp tục và sử dụng chúng ngay bây giờ. Nếu không, bạn có thể phải đợi một lúc để người dùng bắt kịp.

Sử dụng insertAdjiềnHTML () . Nó hoạt động với tất cả các trình duyệt hiện tại, ngay cả với IE11.

var mylist = document.getElementById('mylist');
mylist.insertAdjacentHTML('beforeend', '<li>third</li>');

<ul id="mylist">
 <li>first</li>
 <li>second</li>
</ul>

Các triển khai DOM mới hơn có range.createContextualFragment, thực hiện những gì bạn muốn theo cách độc lập với khung.

Nó được hỗ trợ rộng rãi. Để chắc chắn, hãy kiểm tra tính tương thích của nó trong cùng một liên kết MDN, vì nó sẽ thay đổi. Tính đến tháng 5 năm 2017, đây là:

Feature         Chrome   Edge   Firefox(Gecko)  Internet Explorer   Opera   Safari
Basic support   (Yes)    (Yes)  (Yes)           11                  15.0    9.1.2

Không cần bất kỳ tinh chỉnh nào, bạn đã có API gốc:

const toNodes = html =>
    new DOMParser().parseFromString(html, 'text/html').body.childNodes[0]

Đối với các đoạn html nhất định như <td>test</td>, các giải pháp div.innerHTML, DOMParser.parseFromString và Range.createContextualFragment (không có ngữ cảnh phù hợp) được đề cập trong các câu trả lời khác ở đây, sẽ không tạo ra <td>phần tử.

jQuery.parseHTML () xử lý chúng đúng cách (Tôi đã trích xuất hàm parseHTML của jQuery 2 thành một hàm độc lập có thể được sử dụng trong các cơ sở mã không phải là jquery).

Nếu bạn chỉ hỗ trợ Edge 13+, đơn giản hơn là chỉ sử dụng thẻ mẫu HTML5:

function parseHTML(html) {
    var t = document.createElement('template');
    t.innerHTML = html;
    return t.content.cloneNode(true);
}

var documentFragment = parseHTML('<td>Test</td>');

Đây là một cách đơn giản để làm điều đó:

String.prototype.toDOM=function(){
  var d=document
     ,i
     ,a=d.createElement("div")
     ,b=d.createDocumentFragment();
  a.innerHTML=this;
  while(i=a.firstChild)b.appendChild(i);
  return b;
};

var foo="<img src='//placekitten.com/100/100'>foo<i>bar</i>".toDOM();
document.body.appendChild(foo);

Bạn có thể tạo các nút DOM hợp lệ từ một chuỗi bằng cách sử dụng:

document.createRange().createContextualFragment()

Ví dụ sau đây thêm một phần tử nút trong trang lấy đánh dấu từ một chuỗi:

let html = '<button type="button">Click Me!</button>';
let fragmentFromString = function (strHTML) {
  return document.createRange().createContextualFragment(strHTML);
}
let fragment = fragmentFromString(html);
document.body.appendChild(fragment);

Với Prototype, bạn cũng có thể làm:

HTML:

<ul id="mylist"></ul>

JS:

$('mylist').insert('<li>text</li>');

Tôi đang sử dụng phương pháp này (Hoạt động trong IE9 +), mặc dù nó sẽ không phân tích cú pháp <td>hoặc một số đứa trẻ trực tiếp không hợp lệ khác của cơ thể:

function stringToEl(string) {
    var parser = new DOMParser(),
        content = 'text/html',
        DOM = parser.parseFromString(string, content);

    // return element
    return DOM.body.childNodes[0];
}

stringToEl('<li>text</li>'); //OUTPUT: <li>text</li>

Để tăng cường hơn nữa đoạn mã .toDOM () hữu ích mà chúng ta có thể tìm thấy ở những nơi khác nhau, giờ đây chúng ta có thể sử dụng backticks ( mẫu chữ ) một cách an toàn .

Vì vậy, chúng ta có thể có dấu ngoặc đơn và dấu ngoặc kép trong khai báo html foo .

Điều này hành xử như heredocs cho những người quen thuộc với thuật ngữ này.

Điều này có thể được tăng cường hơn nữa với các biến, để tạo khuôn mẫu phức tạp:

Các mẫu chữ được bao quanh bởi ký tự back-tick ( ) (dấu trọng âm) thay vì dấu ngoặc kép hoặc dấu ngoặc đơn. Mẫu chữ có thể chứa giữ chỗ. Chúng được biểu thị bằng ký hiệu đô la và dấu ngoặc nhọn ($ {biểu thức}). Các biểu thức trong trình giữ chỗ và văn bản giữa chúng được truyền vào một hàm. Hàm mặc định chỉ ghép các phần thành một chuỗi. Nếu có một biểu thức đứng trước mẫu chữ (thẻ ở đây), thì đây được gọi là "mẫu được gắn thẻ". Trong trường hợp đó, biểu thức thẻ (thường là một hàm) được gọi với mẫu bằng chữ được xử lý, sau đó bạn có thể thao tác trước khi xuất. Để thoát dấu tích ngược trong một mẫu bằng chữ, hãy đặt dấu gạch chéo ngược \ trước dấu tích ngược.

String.prototype.toDOM=function(){
  var d=document,i
     ,a=d.createElement("div")
     ,b=d.createDocumentFragment()
  a.innerHTML = this
  while(i=a.firstChild)b.appendChild(i)
  return b
}

// Using template litterals
var a = 10, b = 5
var foo=`
<img 
  onclick="alert('The future start today!')"   
  src='//placekitten.com/100/100'>
foo${a + b}
  <i>bar</i>
    <hr>`.toDOM();
document.body.appendChild(foo);

img {cursor: crosshair}

Vậy, tại sao không sử dụng trực tiếp .innerHTML +=? Bằng cách đó, toàn bộ DOM đang được trình duyệt tính toán lại, nó chậm hơn nhiều.

https://caniuse.com/template-literals

Tôi đã thêm một Documentnguyên mẫu tạo ra một phần tử từ chuỗi:

Document.prototype.createElementFromString = function (str) {
    const element = new DOMParser().parseFromString(str, 'text/html');
    const child = element.documentElement.querySelector('body').firstChild;
    return child;
};

HTML5 & ES6

<template>

Bản giới thiệu

"use strict";

/**
 *
 * @author xgqfrms
 * @license MIT
 * @copyright xgqfrms
 * @description HTML5 Template
 * @augments
 * @example
 *
 */

/*

<template>
    <h2>Flower</h2>
    <img src="https://www.w3schools.com/tags/img_white_flower.jpg">
</template>


<template>
    <div class="myClass">I like: </div>
</template>

*/

const showContent = () => {
    // let temp = document.getElementsByTagName("template")[0],
    let temp = document.querySelector(`[data-tempalte="tempalte-img"]`),
        clone = temp.content.cloneNode(true);
    document.body.appendChild(clone);
};

const templateGenerator = (datas = [], debug = false) => {
    let result = ``;
    // let temp = document.getElementsByTagName("template")[1],
    let temp = document.querySelector(`[data-tempalte="tempalte-links"]`),
        item = temp.content.querySelector("div");
    for (let i = 0; i < datas.length; i++) {
        let a = document.importNode(item, true);
        a.textContent += datas[i];
        document.body.appendChild(a);
    }
    return result;
};

const arr = ["Audi", "BMW", "Ford", "Honda", "Jaguar", "Nissan"];

if (document.createElement("template").content) {
    console.log("YES! The browser supports the template element");
    templateGenerator(arr);
    setTimeout(() => {
        showContent();
    }, 0);
} else {
    console.error("No! The browser does not support the template element");
}

@charset "UTf-8";

/* test.css */

:root {
    --cololr: #000;
    --default-cololr: #fff;
    --new-cololr: #0f0;
}

[data-class="links"] {
    color: white;
    background-color: DodgerBlue;
    padding: 20px;
    text-align: center;
    margin: 10px;
}

<!DOCTYPE html>
<html lang="zh-Hans">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Template Test</title>
    <!--[if lt IE 9]>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
    <![endif]-->
</head>

<body>
    <section>
        <h1>Template Test</h1>
    </section>
    <template data-tempalte="tempalte-img">
        <h3>Flower Image</h3>
        <img src="https://www.w3schools.com/tags/img_white_flower.jpg">
    </template>
    <template data-tempalte="tempalte-links">
        <h3>links</h3>
        <div data-class="links">I like: </div>
    </template>
    <!-- js -->
</body>

</html>

Muộn nhưng chỉ là một ghi chú;

Có thể thêm một phần tử tầm thường vào phần tử đích dưới dạng một thùng chứa và loại bỏ nó sau khi sử dụng.

// Đã thử nghiệm trên chrome 23.0, firefox 18.0, tức là 7-8-9 và opera 12.11.

<div id="div"></div>

<script>
window.onload = function() {
    var foo, targetElement = document.getElementById('div')
    foo = document.createElement('foo')
    foo.innerHTML = '<a href="#" target="_self">Text of A 1.</a> '+
                    '<a href="#" onclick="return !!alert(this.innerHTML)">Text of <b>A 2</b>.</a> '+
                    '<hr size="1" />'
    // Append 'foo' element to target element
    targetElement.appendChild(foo)

    // Add event
    foo.firstChild.onclick = function() { return !!alert(this.target) }

    while (foo.firstChild) {
        // Also removes child nodes from 'foo'
        targetElement.insertBefore(foo.firstChild, foo)
    }
    // Remove 'foo' element from target element
    targetElement.removeChild(foo)
}
</script>

Giải pháp nhanh nhất để kết xuất DOM từ chuỗi:

let render = (relEl, tpl, parse = true) => {
  if (!relEl) return;
  const range = document.createRange();
  range.selectNode(relEl);
  const child = range.createContextualFragment(tpl);
  return parse ? relEl.appendChild(child) : {relEl, el};
};

Và ở đây bạn có thể kiểm tra hiệu năng cho thao tác DOM React vs JS gốc

Bây giờ bạn chỉ có thể sử dụng:

let element = render(document.body, `
<div style="font-size:120%;line-height:140%">
  <p class="bold">New DOM</p>
</div>
`);

Và tất nhiên trong tương lai gần, bạn sử dụng các tham chiếu từ bộ nhớ gây ra var "phần tử" là DOM được tạo mới trong tài liệu của bạn.

Và hãy nhớ "InternalHTML =" rất chậm: /

Đây là mã của tôi và nó hoạt động:

function parseTableHtml(s) { // s is string
    var div = document.createElement('table');
    div.innerHTML = s;

    var tr = div.getElementsByTagName('tr');
    // ...
}

Tôi nghĩ rằng tôi muốn chia sẻ điều này qua cách tiếp cận phức tạp nhưng đơn giản mà tôi đã nghĩ ra ... Có lẽ ai đó sẽ tìm thấy thứ gì đó hữu ích.

/*Creates a new element - By Jamin Szczesny*/
function _new(args){
    ele = document.createElement(args.node);
    delete args.node;
    for(x in args){ 
        if(typeof ele[x]==='string'){
            ele[x] = args[x];
        }else{
            ele.setAttribute(x, args[x]);
        }
    }
    return ele;
}

/*You would 'simply' use it like this*/

$('body')[0].appendChild(_new({
    node:'div',
    id:'my-div',
    style:'position:absolute; left:100px; top:100px;'+
          'width:100px; height:100px; border:2px solid red;'+
          'cursor:pointer; background-color:HoneyDew',
    innerHTML:'My newly created div element!',
    value:'for example only',
    onclick:"alert('yay')"
}));

Tại sao không làm với js bản địa?

    var s="<span class='text-muted' style='font-size:.75em; position:absolute; bottom:3px; left:30px'>From <strong>Dan's Tools</strong></span>"
    var e=document.createElement('div')
    var r=document.createRange();
    r.selectNodeContents(e)
    var f=range.createContextualFragment(s);
    e.appendChild(f);
    e = e.firstElementChild;

function domify (str) {
  var el = document.createElement('div');
  el.innerHTML = str;

  var frag = document.createDocumentFragment();
  return frag.appendChild(el.removeChild(el.firstChild));
}

var str = "<div class='foo'>foo</div>";
domify(str);

Bạn có thể sử dụng chức năng sau để chuyển đổi văn bản "HTML" thành phần tử

function htmlToElement(html)
{
  var element = document.createElement('div');
  element.innerHTML = html;
  return(element);
}
var html="<li>text and html</li>";
var e=htmlToElement(html);

var jtag = $j.li({ child:'text' }); // Represents: <li>text</li>
var htmlContent = $('mylist').html();
$('mylist').html(htmlContent + jtag.html());

Sử dụng jnerator

Đây là mã làm việc cho tôi

Tôi muốn chuyển đổi chuỗi ' Văn bản ' thành phần tử HTML

var diva = UWA.createElement('div');
diva.innerHTML = '<a href="http://wwww.example.com">Text</a>';
var aelement = diva.firstChild;

var dir = "test" jQuery.parseHTML (tin nhắn)

Điều này cũng sẽ làm việc:

$('<li>').text('hello').appendTo('#mylist');

Nó cảm thấy giống như một cách jquery với các cuộc gọi chức năng chuỗi.