Манипулирование XHTML DOM с помощью jQuery

Question

Я использую Firefox 3.5. Мой тип документа XHTML 1.0 Strict. Допустим, я хочу вставить изображение в div с идентификатором "foo"; тогда я мог бы попробовать:

var foo = $('#foo');
foo.html('<img src="bar.gif" />');

Это действительно добавляет изображение. Но я заметил, что позже в документе это вызывало странное поведение, которое, как я подозревал, может быть связано с нарушением XHTML. Конечно же, используя инструмент веб-разработчика для Firefox, я проверил сгенерированный источник и с ужасом обнаружил, что после запуска скрипта у меня есть:

<div id="foo"><img src="bar.gif"></div>

Куда делась косая черта на теге img !? Осматривая, я обнаружил, что это не специфичная для jQuery проблема: чистый код JavaScript

document.getElementById('foo').innerHTML = '<img src="bar.gif" />';

дает те же результаты. И что же мне делать? Должен отметить, что используя расширенную форму

<img src="bar.gif"></img>

не влияет на результат. Как мне вставить строго допустимый XHTML в мой документ с помощью JavaScript?

Answer 1

Это небольшой выстрел в темноте, и я не уверен, может ли это быть причиной, но вы уверены, что используете XHTML, а не просто стандартный HTML с синтаксисом XHTML. То есть: является ли тип MIME документа текстом по умолчанию / html или это application / xhtml + xml?

Недавно я прочитал следующую статью, и проблема, с которой вы столкнулись, имела бы для меня смысл, если бы браузер на самом деле не рассматривал документ как XML (и, следовательно, он удалял ошибочные косые черты стиля XHTML из-за несоответствия). типу MIME) ...

http://www.xml.com/pub/a/2003/03/19/dive-into-xml.html

Просто мысль.

Answer 2

Попробуйте вместо этого:

var image = document.createElement('img');
image.setAttribute('src', 'bar.gif');
foo.appendChild(image);

Answer 3

я создал небольшой тест,

код:

$('input.clone').live('click', function(){

    var img = $('<img/>').attr({src : 'http://www.bennadel.com/resources/uploads/jquery_gradient_example_no_gradient.jpg'});
    $('#target').append(img);

});

HTML:

<div id="target"> test </div>
<input type="button" class="clone" id="btnClone" value="clone"/>

Вы можете увидеть маленькую демонстрацию здесь

и вот полный код @ pastebin

Answer 4

попробуйте экранировать косую черту ... возможно, она не помещается, потому что не экранирована:

$('#foo').html('<img src="bar.gif" \/>');

также, не забывайте, если вы пишете XHTML, что вам нужно включить alt текст :))