добавление элементов DOM через jquery

0

Я начинаю пользоваться html и CSS. У меня есть сомнения относительно отображения в пользовательском интерфейсе. У меня есть тело с html-структурой следующим образом:

    <div id="wrapper">


        <div id="main">

        <input type="text" id="search"></input> <button id="sub" value="Search"></button>
            <div id="reel">
            <!-- ******************************************************************************************** -->
            <!-- ******************************************************************************************** -->


                <!-- Header Item -->

                    <div id="header" class="item" data-width="400">
                        <h1>test</h1>
                        <p>test</p>
                    </div>

                <!-- Thumb Items -->

                    <article class="item thumb" data-width="282">
                        <h2>You really got me</h2>
                        <a href="images/fulls/01.jpg"><img src="images/thumbs/01.jpg" alt=""></a>
                    </article>



            </div>
        </div>

    </div>

</body>

Я использовал css для отображения галереи изображений (в настоящее время нет изображения, но внутри тегов "статьи"). Я хочу динамически добавлять статьи через jquery, для которых я использую следующий код:

$("#reel").append("<article class=\"item thumb\" data-width=\"282\"></article>");

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

  • 2
    Можете ли вы создать jsfiddle.net, который демонстрирует проблему?
  • 0
    в JS можно смешивать одинарные и двойные кавычки, чтобы вам не пришлось избегать всего.
Показать ещё 2 комментария
Теги:
dom

1 ответ

0

Вам нужно преобразовать article в узел html, jquery имеет сокращенный метод для этого:

var $node = $('<article />');
console.log($node);
[article, constructor: function, init: function, selector: "", jquery: "1.7.1", size: function…]

Это создает новый узел в памяти.

то для работы вашей функции вам необходимо изменить приложение

$("#reel").append($("<article class=\"item thumb\" data-width=\"282\"></article>"));

ура!

РЕДАКТИРОВАТЬ

Как указано в комментариях, jquery автоматически делает это для вас, возможно, вы добавили узел, вы проверили с помощью навигатора DOM, чтобы проверить, существует ли узел уже существует?

В комментариях вы говорите, что у них отсутствуют атрибуты, попробуйте заменить двойные кавычки, содержащие html, одинарными кавычками следующим образом:

$("#reel").append('<article class="item thumb" data-width="282"></article>');
Поделиться
  • 1
    Вы также можете добавить строку, не нужно оборачивать ее внутри объекта jQuery: content Type: htmlString or Element or Array or jQuery
  • 0
    Спасибо за ответ, который я попытался использовать, так как вы указали: var $ node = $ ('<article />'); console.log ($ узел); $ ("# reel"). append ($ ("<article class = \" item thumb \ "data-width = \" 282 \ "> </ article>")); Но я все еще ничего не вижу в интерфейсе. Пожалуйста, обратитесь к снимкам: до и после jquery: grab.by/us6Q Как мне это нужно (добавление пустой статьи на html-странице) grab.by/us74
Показать ещё 2 комментария

Ещё вопросы

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