HTML-код, добавленный в jQuery, неправильно вкладывается в Chrome

0

У меня есть следующая строка HTML, созданная в JavaScript:

var s = "<p id='main'><p>Sample paragraph text.</p><p>more</p></p>";

Которая, отформатированная, выглядит так:

<p id='main'>
   <p>Sample paragraph text.</p>
   <p>more</p>
</p>

Однако, когда я использую jQuery append для добавления этого в div, он добавляется следующим образом:

<p id='main'></p>
<p>Sample paragraph text.</p>
<p>more</p>

Вы можете копировать себя в JsFiddle здесь, это происходит для меня хотя бы в Chrome:

Изображение 174551

После того, как вы запустите его, щелкните правой кнопкой мыши на абзаце и выберите "Осмотреть элемент".

Это вызывает проблему для меня, потому что я ожидаю, что смогу выбрать родительский абзац с помощью ID и получить внутренний HTML с помощью .html(), но, очевидно, это приведет к пустой строке.

Кто-нибудь знает, почему это может произойти?

  • 2
    Я не думаю, что вложенные теги абзаца допустимы.
  • 0
    ^^^ Это потому, что браузер пытается исправить ваши ошибки
Показать ещё 1 комментарий
Теги:
append

2 ответа

2
Лучший ответ

Вы не можете вложить абзацы. Используйте div, чтобы обернуть абзацы.

Поделиться
  • 0
    Я чувствую, что должен был это знать, ну хорошо. Спасибо за сумасшедший быстрый ответ!
1

как все говорят, вложенность абзацев недействительна при добавлении в качестве html. Вы можете обернуть этот html в span или div.later, развернуть родительский файл. Что-то вроде этого:

var s = "<span><p id='main'><p>Sample paragraph text.</p><p>more</p></p></span>";
$("#container").append(s);
$("#container span p").unwrap();

Рабочая демонстрация

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню