jQuery：在DOM外部选择和操作html个元素

Question

据我所知，只有加载到 DOM 中的对象才能使用选择器进行操作。 这在下面的示例中有所说明，当单击按钮时，它的单击处理程序未成功尝试 select 页面中要加载的元素并将其更改为之前的 html 。 我推测因为在链接页面加载到 DOM 之前触发了点击处理程序，所以选择器不会影响元素。

我的问题是，有没有办法实例化 html 的外部块并在将其插入 DOM 之前对其进行操作。

脚本_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>

Answer 1

我纠正了错误的评论。 是的，你可以做这样的事情 ，但是阅读jQuery文档，据说代码插入了DOM http://api.jquery.com/jQuery/#jQuery2 。 所以，即使下面的代码似乎也没有在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/

编辑：

要从外部文件插入代码，可以使用load函数。 您可以在此处看到一个示例： http ： //jsfiddle.net/davidbuzatto/zuFsc/请注意，在此示例中，我使用echo服务os jsFiddle来模拟外部文件。 看看这里如何在Java中将视图文件输出为ajax响应？ 在这里http://api.jquery.com/load/

Answer 2

您可以使用javascript手动创建未插入DOM层次结构的DOM元素，并且可以在将它们插入DOM之前根据需要对其进行操作。

但是，如果您在解析HTML页面之前尝试操作由页面HTML创建的DOM元素，则无法执行此操作。 DOM元素在那时不存在，因此除非您按照第一段中的描述手动创建它们，否则无需操作。

某些操作仅适用于插入到DOM hieararchy中的DOM元素，例如document.getElementById() ，但是其他方法可以用在不在主层次结构中的DOM上，例如item.getElementsByClassName() ，其中item是a DOM元素不在DOM层次结构中。

在jQuery中，默认上下文是文档，因此像$(".foo")这样的简单选择器操作将只搜索DOM文档层次结构中的DOM元素。 但是，如果你传递一个特定的上下文$(".foo", item) ，那么jQuery选择器将搜索该上下文，而不是主文档。

Answer 3

使用template标签也是一个很好的解决方案，

如本答案中所述，有关更多信息，请参见此处