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

Question

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

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

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

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

Рішення 1

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

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

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

15

додано 27 червень 2013 при 06:37 Автор Marc Змінено 05 Жовтень 2013 при 03:41

Перегляди: 1

джерело

ro nl ja ru fr es pt de zh bn ar kk uz be tr

Я мав на увазі те, що робить цей метод складним - це обгортає тег img в div, щоб отримати html-код цього div. І цей елемент насправді створено, він намагається завантажити img.jpg у моєму браузері, навіть якщо не підключити його до DOM.

додано 27 червень 2013 при 06:42, Автор Marc, джерело

Легко, але складно? Не звучить правильно. Якщо вам не подобається використовувати методи, то чому б не просто об'єднати рядок, а потім вставити його за допомогою методу .html() ?

додано 27 червень 2013 при 06:40, Автор GEMI, джерело

Вам потрібно написати перекладача або використовувати існуючу бібліотеку, таку як: json2html.com

додано 27 червень 2013 при 06:41, Автор 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

додано 27 червень 2013 при 06:44 Автор PSL

джерело

@PSL: Так, функція повинна повернути , а ваша справа! Єдиний недолік полягає в тому, що він створює елемент у фоновому режимі, щоб зробити це (що може бути найкращим рішенням, я не впевнений).

додано 28 червень 2013 при 02:48, Автор Marc, джерело

@PSL: Так, дякую вам дуже! Я просто чекаю, якщо хтось висуває просту функцію "implode", яка не створює елемент внутрішньо перед прийняттям вашої відповіді. Я думав про зовнішнє рішення HTML, перш ніж я розмістив тут питання, але відмовився від нього через сумісність, не перевіряючи його.

додано 27 червень 2013 при 09:13, Автор Marc, джерело

Добре, IE 4 звучить досить безпечно :)

додано 27 червень 2013 при 06:53, Автор Marc, джерело

Наскільки безпечно покладатися на зовнішній HTML?

додано 27 червень 2013 при 06:50, Автор Marc, джерело

Це безпечно, developer.mozilla.org/en/US/ docs/Web/API/element.outerHTML

додано 27 червень 2013 при 06:50, Автор PSL, джерело

@Marc, я сподіваюся, що ви нічого не підтримуєте нижче ... :) lol

додано 27 червень 2013 при 06:56, Автор PSL, джерело

@ Марк ааа .. У вас є майже всі варіанти тут :). Напевно, ви шукаєте відповідь на конкатенацію рядка, яку ви отримали. Я вірю в те, що 2 можливості створюють елемент temp і html не з'єднують рядок.

додано 28 червень 2013 при 03:10, Автор PSL, джерело

@ Марк, що ви маєте на увазі? З'єднати рядок для створення HTML-образу зображення?

додано 27 червень 2013 при 08:47, Автор PSL, джерело

ще +1, щоб прийти першим.

додано 27 червень 2013 при 06:57, Автор Matthew Graves, джерело

Автор Matthew Graves · Answer 1 · 2013-06-27T06:56Z

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

$('',object)[0].outerHTML;

8

додано 27 червень 2013 при 06:56 Автор Matthew Graves

джерело

Ну, ніякої різниці, хоча. jQuery сам використовує сам масив. jsperf.com/get-vs-array . Але я б також використовував [0] , але не хотів редагувати .. :) +1 хоча ...

додано 27 червень 2013 при 07:17, Автор PSL, джерело

ха-ха, спасибі!

додано 27 червень 2013 при 07:18, Автор Matthew Graves, джерело

Автор bugwheels94 · Answer 2 · 2013-06-27T06:40Z

Простий з jquery

$("<div>").append($('',object)).html();

5

додано 27 червень 2013 при 06:40 Автор bugwheels94

джерело

... буде елементом, НЕ рядок ...

додано 27 червень 2013 при 06:54, Автор Marc, джерело

Повертає значення $ ('', об'єкт); є об'єктом jQuery, але мені потрібна рядок з кодом HTML. Це для системи шаблонів, і я можу використовувати jQuery для створення рядка, але не може використовувати цей об'єкт.

додано 27 червень 2013 при 06:51, Автор Marc, джерело

Звичайно, це працює, але це не STRING ...

додано 27 червень 2013 при 06:49, Автор Marc, джерело

Ви пробували просто $ ('', об'єкт) .html() ?

додано 27 червень 2013 при 06:55, Автор acdcjunior, джерело

Якщо хтось перевірив, що це працює, це, безумовно, хороша відповідь

додано 27 червень 2013 при 06:41, Автор aaronman, джерело

@Marc, який не є рядком об'єкта , дійсно є об'єктом

додано 27 червень 2013 при 06:50, Автор bugwheels94, джерело

$ ('', об'єкт) [0] .outerHTML

додано 27 червень 2013 при 06:55, Автор Matthew Graves, джерело

$ ('', obj) [0] або

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

?!

додано 27 червень 2013 при 06:53, Автор Bassem, джерело

Я буду проклятий, він працює: jsfiddle.net/ynbhS

додано 27 червень 2013 при 06:47, Автор Bassem, джерело

Це працює: jsfiddle.net/B7zm3

додано 27 червень 2013 при 06:46, Автор Tim Ackroyd, джерело

Автор Brad · Answer 3 · 2013-06-27T07:14Z

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

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

Приклад із Swig Documentation

Шаблон

`{{ pagename|title }}`

{{ author }}
There are no authors.

`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

Автор Raj Nathani · Answer 4 · 2013-06-27T07:31Z

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

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

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

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

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

img(obj)

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

Автор user1091949 · Answer 5 · 2013-06-27T07:02Z

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

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

додано 27 червень 2013 при 07:02 Автор user1091949

джерело

{title: '"/> <script> alert (\' XSS! \ ');
</script>')

додано 27 червень 2013 при 07:08, Автор Brad, джерело

Він створює рядок потенційно недійсного HTML. Моя низхідна точка зору не зовсім непотрібна.

додано 27 червень 2013 при 07:05, Автор Brad, джерело

Це погана ідея. Ваш код не враховує втечі цінності для HTML! Залежно від того, звідки надходять ці дані, ви можете відкрити себе для атак XSS або принаймні якийсь зламаний код.

додано 27 червень 2013 при 07:04, Автор Brad, джерело

@Brad Код виконує саме те, що задане питання. Він створює рядок HTML з заданим об'єктом. Ваша нижня точка є недоречною.

додано 27 червень 2013 при 07:05, Автор user1091949, джерело

@Brad Поясніть, як існує потенціал для неправильного HTML, який виникає в результаті цього коду? Є буквально один і єдиний один можливий результат.

додано 27 червень 2013 при 07:06, Автор user1091949, джерело

@ Бред О, як би дивувався, я міг би призвести до того, що в цьому питанні було (src: 'img.jpg', title: 'foo') .

додано 27 червень 2013 при 07:09, Автор user1091949, джерело