Как передать в DOM html код(в виде обычного текста)?

Question

[Владимир Обабков]

Здравствуйте
Для блога ЖЖ надо тащить кучу ссылок из вк.
Для удобства сделал так :

var aID = prompt('Ай Ди альбома');
      var size = prompt('разрешение');
$.ajax({
        url: 'https://api.vk.com/method/photos.get?', //Запрос метода VK API
        data: {
      owner_id: '-10491296', // ID пользователя
      album_id: aID // ID альбома
  },
  dataType: "jsonp",
  success: function(data) {
    data.response.forEach(function(item) {
        var img = item.size;

        (!(img)) ? img = item.src_big : img; // проверяем, есть ли самое большое разрешение у фотографии
       $('<text>'+ img +'</text></br>').appendTo('.body');
    });
  }
  });

Но хотелось бы обернуть это в <img src="+img+" />.
Косо сформулировал. Мне необходимо получить это ввиде обычного текста для последующего копирования
UPD Выглядеть должно вот так :

<img src="ссылка 1"/>
<img src="ссылка 2"/>
<img src="ссылка 3"/>

В виде текста.
А знаний не хватает (

Comments

[Дмитрий Лузанов]

Не понятен вопрос, но возможно это решит вашу проблему api.jquery.com/attr
$(img).attr('src', тут_пишем_ваш_src)

[Владимир Обабков]

Predve4niy: Косо написал. Сейчас переформулирую. Я хочу в виде текста получить все фотографии из своих альбомов обёрнутые в тег img .
Для последующего копирования

[Владимир Обабков]

Predve4niy: Да.. ваш вариант элегантнее чем мой ) Но всё равно ведь выходят картинки ))
А мне нужен текст )

[ildar r. khasanshin]

Владимир Обабков: нажмите ctrl+u в браузере и будет вам текст картинок)

[Владимир Обабков]

ildar r. khasanshin: Это да. Но душа требует перфекционизма !

Answer 1

[Interface]

Хм... Если я вас правильно понял, то ваша проблема в том, что браузер вставляет ваш фрагмент кода "<img src="+img+" />" как картинку, а не как код этой картинки. Далее исхожу из того, что это ваша проблема. Если нет - попробуйте переформулировать вопрос с читого листа.

Ниже есть 5 способов решения этой проблемы (каждое отмечено комментарием// Решение №), а пока предлагаю разобраться почему так происходит:

// Здесь jquery парсит конструкцию и вставляет ее как HTML node. 
// Причем вставляет он в итоге 2 тега: img и br
 $('<img src="' + img + '"></br>').appendTo('.body');

Нам нужно сказать браузеру: вставь это как текст
Для этого есть говорящие свойство .textContent - https://developer.mozilla.org/ru/docs/Web/API/Node...
Также есть метод jQuery: text() - api.jquery.com/text

/*
 * это просто перепишет все 
 * содержимое в цикле, в итоге в конце 
 * останется только одна запись
 */
$('.body').text('<img src="' + img + '"></br>')
// можно попробовать так:
$('.body')[0].textContent += '<img src="' + img + '"></br>'
/*
 * это не лучшее решение, 
 * потому как потеряется вся разметка
 * для остальной части страницы,
 * но это приемлимо (не считая оверхеда)
 * если весь текст лежит в одном блоке:
 */
 $('.img-links')[0].textContent += '<img src="' + img + '"></br>'
// тем не менее, не лучший подход на мой взгляд

Можно собрать все фрагменты кода и вставить один раз:

...
// Решение 1
success: function(data) {
	var parts = [];
    data.response.forEach(function(item) {
        var img = item.size;

        (!(img)) ? img = item.src_big : img; // проверяем, есть ли самое большое разрешение у фотографии
        parts.push('<img src="' + img + '"></br>');
    });
    $('.img-links').text(parts.join(''));
}
...

Здесь вроде все ясно. Зайдем с другой стороны:
Если бы я захотел изначально показать на странице текст вида <img src="http://my.awesome.link">,
то использовть js было бы неудобно. Как я могу сказать браузеру "не превращай это в DOM"?
Я вижу 2 подхода:
- расположить этот текст в специальном теге htmlbook.ru/html/xmp (или можно даже в )
- заescape'ить служебные символы: "<" -> "&lt;", ">" -> "&gt;"

1) подход:

...
// Решение 2
$('<xmp><img src="' + img + '"></xmp>').appendTo('.body');
// пожалуй, один из самых простых способов
...

2) подход:

...
$('<img src="' + img + '">').appendTo('.body'); // не сработает
// потому что jQuery не умеет вставлять текстовые ноды
// или избегает этого, вместо этого вставится первый валидный тег
// это можно решить - ввести контейнер:


// Решение 3
$('<span>&lt;img src="' + img + '"&gt;</span><br>').appendTo('.body'); 
...

Можно ли избежать писания в ручную этих страшных < / >?
Можно!
Используя js-функцию для эскейпинга: например отсюда stackoverflow.com/questions/5499078/fastest-method...
Но тут скорее напрашивается другое решение, близкое к тому, с чего мы начали:
Можно использовать .textContent / .text() - чтобы за нас эскейпил браузер / jQuery:

...
// Решение 4
$( $('<span/>').text('<img src="' + img + '"><br>') ).appendTo('.body'); 
...

И еще одно весьма изящное решение, которое я, надо признаться подсмотрел на StackOverflow ( stackoverflow.com/questions/6588630/jquery-append-text ):
Мы можем сами сказать браузеру, что нам нужна текстовая node и передать ее в jquery:

...
// Решение 5
$('.body').append(document.createTextNode('<img src="' + img + '">'));

Comments

[Владимир Обабков]

Спасибо полный и красивый ответ.