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

У меня есть строка HTML, представляющая элемент: '

  • text
  • '. Я хотел бы добавить его к элементу в DOM (ul в моем случае). Как я могу сделать это с помощью Prototype или DOM?

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

    вопрос задан 30.01.2009
    Omer Bokhari
    29635 репутация

    21 ответов


    • 612 рейтинг

      Примечание: большинство современных браузеров поддерживают элементы HTML

      ответ дан Crescent Fresh, с репутацией 91879, 30.01.2009
    • 186 рейтинг

      В HTML 5 введен элемент

      ответ дан Mark Amery, с репутацией 55591, 13.02.2016
    • 24 рейтинг

      Более новые реализации DOM имеют range.createContextualFragment , что делает то, что вы хотите, независимо от фреймворка.

      Это широко поддерживается. Чтобы убедиться, что проверит свою совместимость в том же канале MDN, так как он будет меняться. По состоянию на май 2017 года это так:

      Feature         Chrome   Edge   Firefox(Gecko)  Internet Explorer   Opera   Safari
      Basic support   (Yes)    (Yes)  (Yes)           11                  15.0    9.1.2
      
      ответ дан kojiro, с репутацией 51462, 6.09.2011
    • 19 рейтинг

      Используйте insertAdjacentHTML () . Он работает со всеми современными браузерами, даже с IE11.

      var mylist = document.getElementById('mylist');
      mylist.insertAdjacentHTML('beforeend', '
    • third
    • ');
      
      
      • first
      • second
    ответ дан Christian d'Heureuse, с репутацией 1658, 28.10.2017
  • 15 рейтинг

    Вот простой способ сделать это:

    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="foobar".toDOM();
    document.body.appendChild(foo);
    
    ответ дан william malo, с репутацией 1831, 3.05.2013
  • 14 рейтинг

    Нет необходимости в какой-либо настройке, у вас есть собственный API:

    const toNodes = html =>
        new DOMParser().parseFromString(html, 'text/html').body.childNodes
    
    ответ дан math2001, с репутацией 1581, 24.02.2017
  • 10 рейтинг

    С Prototype, вы также можете сделать:

    HTML:

      
      

      JS:

      $('mylist').insert('
    • text
    • ');
      
      ответ дан Pablo Borowicz, с репутацией 660, 19.02.2009
    • 8 рейтинг

      Для некоторых фрагментов HTML, таких как

      test , div. innerHTML, DOMParser. parseFromString и range. createContextualFragment (без правильного контекста) не будет создавать элемент .

      jQuery. parseHTML () обрабатывает их (я выделил функцию parseHTML jQuery 2 из в независимую сущность ).

      Для Edge 13+ используйте тег шаблона:

      function parseHTML(html) {
          var t = document.createElement('template');
              t.innerHTML = html;
          return t.content.cloneNode(true);
      }
      
      var documentFragment = parseHTML('
      Test ');
      ответ дан Munawwar, с репутацией 1044, 17.12.2015
    • 5 рейтинг

      Вы можете создать действительные узлы DOM из строки, используя:

      document.createRange().createContextualFragment()

      В следующем примере добавляется элемент кнопки на странице с разметкой из строки:

      let html = '';
      let fragmentFromString = function (strHTML) {
        return document.createRange().createContextualFragment(strHTML);
      }
      let fragment = fragmentFromString(html);
      document.body.appendChild(fragment);
      ответ дан GibboK, с репутацией 32900, 28.02.2017
    • 4 рейтинг

      Я использую этот метод (работает в IE9 +), хотя он не будет анализировать

      или некоторые другие недопустимые прямые дочерние элементы тела:
      function stringToEl(string) {
          var parser = new DOMParser(),
              content = 'text/html',
              DOM = parser.parseFromString(string, content);
      
          // return element
          return DOM.body.childNodes[0];
      }
      
      stringToEl('
    • text
    • '); //OUTPUT: 
    • text
    •         
      
              
      ответ дан usrbowe, с репутацией 152, 8.06.2016
    • 3 рейтинг

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

      Document.prototype.createElementFromString = function (str) {
          const element = new DOMParser().parseFromString(str, 'text/html');
          const child = element.documentElement.querySelector('body').firstChild;
          return child;
      };
      
      ответ дан Raza, с репутацией 321, 20.08.2017
    • 2 рейтинг

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

      function parseTableHtml(s) { // s is string
          var div = document.createElement('table');
          div.innerHTML = s;
      
          var tr = div.getElementsByTagName('tr');
          // ...
      }
      
      ответ дан Wen Qi, с репутацией 387, 21.05.2011
    • 2 рейтинг

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

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

      // Проверено на хроме 23. 0, Firefox 18. 0, т.е. 7-8-9 и опера 12. 11.

      
      
      
      ответ дан K-Gun, с репутацией 7426, 13.12.2012
    • 1 рейтинг

      HTML5

      ответ дан xgqfrms-gildata, с репутацией 301, 28.05.2018
    • 0 рейтинг

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

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

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

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

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

      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=`
      
      foo${a + b}
        bar
          

      `.toDOM();
      document.body.appendChild(foo);
      img {cursor: crosshair}

      https: // caniuse. com / template-literals

      ответ дан Cryptopat, с репутацией 1453, 17.06.2018
    • 0 рейтинг

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

      /*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')"
      }));
      
      ответ дан JxAxMxIxN, с репутацией 911, 21.09.2013
    • -1 рейтинг

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

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

      var diva = UWA.createElement('div');
      diva.innerHTML = 'Text';
      var aelement = diva.firstChild;
      
      ответ дан Sandeep Badawe, с репутацией 1, 8.01.2018
    • -1 рейтинг
      function domify (str) {
        var el = document.createElement('div');
        el.innerHTML = str;
      
        var frag = document.createDocumentFragment();
        return frag.appendChild(el.removeChild(el.firstChild));
      }
      
      var str = "
      foo
      ";
      domify(str);
      
      ответ дан Denim Demon, с репутацией 382, 8.02.2016
    • -2 рейтинг

      Вы можете использовать следующую функцию для преобразования текста «HTML» в элемент

      function htmlToElement(html)
      {
        var element = document.createElement('div');
        element.innerHTML = html;
        return(element);
      }
      var html="
    • text and html
    • ";
      var e=htmlToElement(html);
      ответ дан Saeed saeeyd, с репутацией 1, 11.07.2017
    • -2 рейтинг
      var jtag = $j.li({ child:'text' }); // Represents: 
    • text
    • var htmlContent = $('mylist').html();
      $('mylist').html(htmlContent + jtag.html());
      

      Использовать jnerator

      ответ дан Berezh, с репутацией 603, 25.09.2012
    • -5 рейтинг

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

      $('
    • ').text('hello').appendTo('#mylist');

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

    • ответ дан jack, с репутацией 591, 11.04.2012