Создание нового элемента DOM из строки HTML с использованием встроенных методов DOM или Prototype

Question

У меня есть HTML-строка, представляющая элемент: '<li>text</li>'. Я хотел бы добавить его к элементу в DOM (ul в моем случае). Как я могу сделать это с помощью Prototype или DOM?

(я знаю, что мог бы легко это сделать в jQuery, но, к сожалению, мы не используем jQuery.)

Answer 1

Я добавил Document прототип, который создает элемент из строки:

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

Answer 2

Поздно, но просто как записка;

Можно добавить тривиальный элемент к целевому элементу в качестве контейнера и удалить его после использования.

// Проверено на Chrome 23.0, Firefox 18.0, т.е. 7-8-9 и 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>

Answer 3

Кроме того, для улучшения полезного фрагмента .toDOM () , который мы можем найти в разных местах, теперь мы можем безопасно использовать backticks ( шаблон литералы ).

Таким образом, мы можем иметь одинарные и двойные кавычки в объявлении foo html.

Это ведет себя как heredocs для тех, кто знаком с термином.

Это может быть улучшено с помощью переменных, чтобы сделать сложные шаблоны:

Литералы шаблона заключены в обратную галочку () (серьезный акцент) символ вместо двойных или одинарных кавычек. Шаблонные литералы могут содержат заполнители. Они обозначены знаком доллара и вьющимися фигурные скобки ($ {выражение}). Выражения в заполнителях и текст между ними передается в функцию. Функция по умолчанию просто объединяет части в одну строку. Если есть выражение перед литералом шаблона (тег здесь), это называется template ". В этом случае выражение тега (обычно функция) получает вызывается с обработанным литералом шаблона, который вы можете затем манипулировать перед выводом. Чтобы избежать галочки в шаблоне буквально, ставьте обратную косую черту \ перед обратной галочкой.

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}

https://caniuse.com/template-literals

Answer 4

Вот мой код, и он работает:

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

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

Answer 5

HTML5 & ES6

<template>

Демо

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

Answer 6

var msg = "test" jQuery.parseHTML (МСГ)

Answer 7

Это тоже будет работать:

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

С цепочечными вызовами функций это больше похоже на jquery.

Answer 8

Вот рабочий код для меня

Я хотел преобразовать строку ' Text ' в элемент HTML

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

Answer 9

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

Использование jnerator

Answer 10

Черт возьми, я думал, что поделюсь этим со сложным, но все же простым подходом, который я придумал ... Может быть, кто-то найдет что-то полезное.

/*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')"
}));