Створіть HTML-тег з об'єкта Javascript

Який найкращий спосіб змінити цей об'єкт

{
    src: 'img.jpg',
    title: 'foo'
}

в дійсну HTML-рядок тегів , як це


Рішення 1

З jQuery це легко; але складно:

$('').attr(obj).wrap('<div/>').parent().html();

Будь-які кращі ідеї?

15
Я мав на увазі те, що робить цей метод складним - це обгортає тег img в div, щоб отримати html-код цього div. І цей елемент насправді створено, він намагається завантажити img.jpg у моєму браузері, навіть якщо не підключити його до DOM.
додано Автор Marc, джерело
Легко, але складно? Не звучить правильно. Якщо вам не подобається використовувати методи, то чому б не просто об'єднати рядок, а потім вставити його за допомогою методу .html() ?
додано Автор GEMI, джерело
Вам потрібно написати перекладача або використовувати існуючу бібліотеку, таку як: json2html.com
додано Автор Bassem, джерело

6 Відповіді

Чому ні:

$('', obj).get(0).outerHTML;

Fiddle

Вам не потрібно скріпляти його в div, використовуючи декілька функцій і отримуючи html, просто скористайтеся командою get (0) , щоб отримати елемент DOM та outerHTML , щоб отримати елемент html представництво

Unless you are using browsers really old you can rely on outerHTML

Ось JSPerf , щоб порівняти різницю ефективності між підходами.

21
додано
@PSL: Так, функція повинна повернути , а ваша справа! Єдиний недолік полягає в тому, що він створює елемент у фоновому режимі, щоб зробити це (що може бути найкращим рішенням, я не впевнений).
додано Автор Marc, джерело
@PSL: Так, дякую вам дуже! Я просто чекаю, якщо хтось висуває просту функцію "implode", яка не створює елемент внутрішньо перед прийняттям вашої відповіді. Я думав про зовнішнє рішення HTML, перш ніж я розмістив тут питання, але відмовився від нього через сумісність, не перевіряючи його.
додано Автор Marc, джерело
Добре, IE 4 звучить досить безпечно :)
додано Автор Marc, джерело
Наскільки безпечно покладатися на зовнішній HTML?
додано Автор Marc, джерело
додано Автор PSL, джерело
@Marc, я сподіваюся, що ви нічого не підтримуєте нижче ... :) lol
додано Автор PSL, джерело
@ Марк ааа .. У вас є майже всі варіанти тут :). Напевно, ви шукаєте відповідь на конкатенацію рядка, яку ви отримали. Я вірю в те, що 2 можливості створюють елемент temp і html не з'єднують рядок.
додано Автор PSL, джерело
@ Марк, що ви маєте на увазі? З'єднати рядок для створення HTML-образу зображення?
додано Автор PSL, джерело
ще +1, щоб прийти першим.
додано Автор Matthew Graves, джерело

Можливо, трохи коротше, ніж PSL?

$('',object)[0].outerHTML;
8
додано
Ну, ніякої різниці, хоча. jQuery сам використовує сам масив. jsperf.com/get-vs-array . Але я б також використовував [0] , але не хотів редагувати .. :) +1 хоча ...
додано Автор PSL, джерело
ха-ха, спасибі!
додано Автор Matthew Graves, джерело

Простий з jquery

$("<div>").append($('',object)).html();
5
додано
... буде елементом, НЕ рядок ...
додано Автор Marc, джерело
Повертає значення $ ('', об'єкт); є об'єктом jQuery, але мені потрібна рядок з кодом HTML. Це для системи шаблонів, і я можу використовувати jQuery для створення рядка, але не може використовувати цей об'єкт.
додано Автор Marc, джерело
Звичайно, це працює, але це не STRING ...
додано Автор Marc, джерело
Ви пробували просто $ ('', об'єкт) .html() ?
додано Автор acdcjunior, джерело
Якщо хтось перевірив, що це працює, це, безумовно, хороша відповідь
додано Автор aaronman, джерело
@Marc, який не є рядком об'єкта , дійсно є об'єктом
додано Автор bugwheels94, джерело
$ ('', об'єкт) [0] .outerHTML
додано Автор Matthew Graves, джерело
$ ('', obj) [0] або $ ('', obj) .get (0) ?!
додано Автор Bassem, джерело
Я буду проклятий, він працює: jsfiddle.net/ynbhS
додано Автор Bassem, джерело
Це працює: jsfiddle.net/B7zm3
додано Автор Tim Ackroyd, джерело

Якщо ви виконуєте лише один елемент, це рішення є надмірним, але я думав, що публікую його в будь-якому випадку, оскільки я не знаю, що таке ваш проект.

Ви розглядали двигун шаблону JavaScript? Я граю з Swig останнім часом, оскільки це досить легкий, але є багато варіантів. В принципі, ви створюєте шаблон, передаєте об'єкт JavaScript, а скомпонований шаблон виконується, повертаючи рядок HTML.

Приклад із Swig Documentation

Шаблон

{{ pagename|title }}


    {% for author in authors %}
  • {{ author }}
  • {% else %}
  • There are no authors.
  • {% endfor %}

JavaScript to Render Шаблон

var Шаблон  = require('swig');
var tmpl = Шаблон.compileFile('/path/to/Шаблон.html');
tmpl.render({//The return value of this function is your Вихідні дані HTML
    pagename: 'awesome people',
    authors: ['Paul', 'Jim', 'Jane']
});

Вихідні дані

Awesome People


  • Paul
  • Jim
  • Jane


2
додано

Внесення елементів html на основі об'єктів, що містять значення атрибута-атрибута, такі як

{
    src: 'img.jpg',
    title: 'foo'
}

майже повністю впадає в парадигму cook.js. Команда, яку ви хочете видавати за допомогою готування, буде:

img ({
    src: 'img.jpg',
    title: 'foo'
})

Якщо дані атрибута зберігаються як вказано у вашому прикладі,
в змінній obj , а потім:

img(obj)

Щоб отримати докладнішу інформацію, відвідайте сторінку cook.relfor.co .

1
додано
щоб отримати властивість outerhtml use .outerHTML, це буде виглядати як img ('' ') outerHTML
додано Автор Raj Nathani, джерело

Ось як ви робите це як рядок:

var img = '

http://jsfiddle.net/5dx6e/

EDIT: Зауважте, що код відповідає точному питанню. Звичайно, небезпечно створювати HTML таким чином. Але це не те, що задано питання. Якщо безпека була занепокоєнням ОП, то, звичайно, він/вона використовуватиме document.createElement ('img') замість рядка.

EDIT 2: для повноти, тут є набагато безпечніший спосіб створення HTML з об'єкта:

var img = document.createElement('img'),
    obj = { src : 'img.jpg', title: 'foo' };

for (var prop in obj) {
  if (obj.hasOwnProperty(prop)) {
    img.setAttribute(prop, obj[prop]);
  }
}

http://jsfiddle.net/8yn6Y/

0
додано
{title: '"/> <script> alert (\' XSS! \ '); </script>')
додано Автор Brad, джерело
Він створює рядок потенційно недійсного HTML. Моя низхідна точка зору не зовсім непотрібна.
додано Автор Brad, джерело
Це погана ідея. Ваш код не враховує втечі цінності для HTML! Залежно від того, звідки надходять ці дані, ви можете відкрити себе для атак XSS або принаймні якийсь зламаний код.
додано Автор Brad, джерело
@Brad Код виконує саме те, що задане питання. Він створює рядок HTML з заданим об'єктом. Ваша нижня точка є недоречною.
додано Автор user1091949, джерело
@Brad Поясніть, як існує потенціал для неправильного HTML, який виникає в результаті цього коду? Є буквально один і єдиний один можливий результат.
додано Автор user1091949, джерело
@ Бред О, як би дивувався, я міг би призвести до того, що в цьому питанні було (src: 'img.jpg', title: 'foo') .
додано Автор user1091949, джерело
ІТ КПІ - JavaScript
ІТ КПІ - JavaScript
504 учасників

співтовариство javascript розробників в Telegram