jQuery: выбор и манипулирование html-элементами вне DOM

Насколько я могу судить, с помощью селекторов можно манипулировать только объектами, которые были загружены в DOM. Это проиллюстрировано в приведенном ниже примере, когда кнопка нажата, ее обработчик щелчка безуспешно пытается выбрать элемент на странице для загрузки и изменить его HTML раньше. Я предполагаю, что, поскольку обработчик щелчков срабатывает до того, как страница ссылок загружается в DOM, селектор не влияет на элемент.

Мой вопрос заключается в том, есть ли способ создать внешний фрагмент html и манипулировать им, прежде чем вставлять его в DOM.

script_1.js:

$(document).ready(function () {
    $("#testButton").click(function () {
        $("#externalPageDiv").html("hello world");
    });
});

HTML-код внешней страницы:

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css"
    />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
    <script src="script_1.js"></script>
</head>

<body>
    <div data-role="page" id="externalPage" data-add-back-btn="true">
        <div data-role="content" id="externalPageContent">
            <div id="externalPageDiv"></div>external page</div>
    </div>
</body>

Главная страница Html:

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css"
    />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
    <script src="script_1.js"></script>
</head>

<body>
    <div data-role="page" id="internalPage_1" data-add-back-btn="true">
        <div data-role="content" id="internalPageContent_1">
            <a href="externalPage.html" id="testButton" data-role="button" rel="external">Page Change</a>
        </div>
    </div>
    <div data-role="page" id="mainPage" data-add-back-btn="true">
        <div data-role="content" id="mainPageContent">Main Page</div>
    </div>
</body>

Источник

3 ответа

Я исправляю свой неправильный комментарий. Да, вы можете сделать что-то вроде этого, но, читая документацию jQuery, говорят, что код вставлен в DOM http://api.jquery.com/jQuery/. Таким образом, даже приведенный ниже код, похоже, ничего не вставляет в DOM, он действительно вставлен.

Попробуй это:

var codeToProcess = "<div>" +
                    "    <div id='myDiv1'>a</div>" +
                    "    <div id='myDiv2'>b</div>" +
                    "    <div id='myDiv3'>c</div>" +
                    "</div>";

var $toProcess = $( codeToProcess );
$toProcess.find( "div" ).addClass( "processed" );

// getting by id before insertion
alert( $toProcess.find( "#myDiv1" ).html() );
alert( $( "#myDiv1" ).html() ); // this will return null, since the divs
                                // were not yet added to the document

$toProcess.appendTo( "#container" );
// or $( "#container" ).html( $toProcess );

// getting by id after insertion
alert( $( "#myDiv2" ).html() );

jsFiddle: http://jsfiddle.net/davidbuzatto/me7T3/

Редактировать:

Чтобы вставить код из внешнего файла, вы можете использовать функцию загрузки. Вы можете увидеть пример здесь: http://jsfiddle.net/davidbuzatto/zuFsc/ Обратите внимание, что в этом примере я использовал службу echo os jsFiddle для эмуляции внешнего файла. Посмотрите здесь Как вы выводите файл представления как ответ ajax в Java? и здесь http://api.jquery.com/load/

Источник

Вы можете использовать javascript для ручного создания элементов DOM, которые не вставляются в иерархию DOM, и вы можете манипулировать ими столько, сколько хотите, прежде чем вставлять их в DOM.

Но, если вы пытаетесь манипулировать элементами DOM, созданными HTML вашей страницы до того, как HTML этой страницы был проанализирован, вы не сможете этого сделать. Элементы DOM в этот момент не существуют, поэтому манипулировать ими нечего, если вы не создали их вручную, как описано в первом абзаце.

Некоторые операции работают только с элементами DOM, вставленными в иерархию DOM, такими как document.getElementById(), но другие методы могут использоваться в DOM, который не входит в основную иерархию, например item.getElementsByClassName() где item является элементом DOM, не входящим в иерархию DOM.

В jQuery контекстом по умолчанию является документ, поэтому такая простая операция выбора, как $(".foo") будет искать только элементы DOM в иерархии документов DOM. Но, если вы передаете определенный контекст, $(".foo", item)затем селектор jQuery будет искать этот контекст, а не основной документ.

Источник
Есть несколько способов сделать это.

Некоторые из них также можно использовать вместе.

Используяtemplateярлык

(подробнее) Это может существовать в вашем HTML-коде, но не отображается.

С использованиемdocument.createElement('tagtype');

(подробнее) Опционально вместе с фрагментом документа . Затем добавьте к родителю через.append(newEl)или.prepend(newEl)или другой. Конечно, их можно добавлять друг к другу, и если у вас есть что добавить, вы можете использоватьinnerHTMLс этими тоже.

Использование теневого DOM

Обратите внимание, что это всего лишь обзор, у некоторых есть свои маленькие причуды и все такое.

Источник
Другие вопросы по тегам