jQuery：选择和操作DOM之外的HTML元素 [英] jQuery: Selecting and manipulating html elements outside the DOM
问题描述
据我所知，只有已经加载到DOM中的对象可以使用选择器进行操作。这在下面的示例中说明，当按钮被点击时，它的点击处理程序成功尝试选择要加载的页面中的元素，然后更改它的HTML。我推测，因为在链接页面加载到DOM之前触发点击处理程序，选择器不会影响元素。
我的问题是，是否有任何方法来实例化一个外部的html块，然后将其插入到DOM中。
script_1.js：
$（document）.ready（function（）{
$ #testButton）。click（function（）{
$（＃externalPageDiv）。html（hello world）;
}）;
}）;
外部页面html：
< head>
< meta name =viewportcontent =width = device-width，initial-scale = 1>
< meta http-equiv =Content-Typecontent =text / html; charset = UTF-8/>
< link rel =stylesheethref =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 src =script_1.js>< / script>
< / head>
< body>
< div data-role =pageid =externalPagedata-add-back-btn =true>
< div data-role =contentid =externalPageContent>
< div id =externalPageDiv>< / div>外部页面< / div>
< / div>
< / body>
主页Html： p>
< head>
< meta name =viewportcontent =width = device-width，initial-scale = 1>
< meta http-equiv =Content-Typecontent =text / html; charset = UTF-8/>
< link rel =stylesheethref =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 src =script_1.js>< / script>
< / head>
< body>
< div data-role =pageid =internalPage_1data-add-back-btn =true>
< div data-role =contentid =internalPageContent_1>
< a href =externalPage.htmlid =testButtondata-role =button =external>页面更改< / a>
< / div>
< / div>
< div data-role =pageid =mainPagedata-add-back-btn =true>
< div data-role =contentid =mainPageContent>主页< / div>
< / div>
< / body>
我正在纠正我的错误评论。 是的，你可以这样做这样的 ，但阅读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）;
//插入前通过id获取
alert（$ toProcess.find（＃myDiv1）.html（））;
alert（$（＃myDiv1）.html（））; //这将返回null，因为divs
//尚未添加到文档
$ toProcess.appendTo（#container）;
//或$（#container）.html（$ toProcess）;
//插入后通过id获取
alert（$（＃myDiv2）.html（））;
jsFiddle： http://jsfiddle.net/davidbuzatto/me7T3/
编辑：
要从外部文件插入代码，可以使用加载功能。您可以在这里看到一个例子： http://jsfiddle.net/davidbuzatto/zuFsc/ 请注意在本例中，我使用echo服务os jsFiddle模拟外部文件。看看这里如何您是否在Java中输出视图文件作为ajax响应？，这里 http：// api。 jquery.com/load/
As far as I can tell only objects that have been loaded into the DOM can be manipulated with selectors. This is illustrated in the example below, when the button is clicked it's click handler un-successfully tries to select an element in the page to be loaded and change it's html before. I surmise that because the click handler is triggered before the link page is loaded into the DOM the selector doesn't effect the element.
My question is, is there any way to instantiate an external chunk of html and manipulate it before inserting it into the DOM.
script_1.js:
$(document).ready(function () {
$("#testButton").click(function () {
$("#externalPageDiv").html("hello world");
});
});
External Page 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>
Main Page 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>
I'm correcting my incorrect comment. Yes, you can do something like this, but reading the jQuery documentation, it is said that the code is inserted in the DOM http://api.jquery.com/jQuery/#jQuery2. So, even the code below seems to not insert nothing in the DOM, it is indeed inserted.
Try this:
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/
Edit:
To insert code from a external file, you can use the load function. You can see an example here: http://jsfiddle.net/davidbuzatto/zuFsc/ Note that in this example I used the echo service os jsFiddle to emulate a external file. Take a look here How do you output a view file as an ajax response in Java? and here http://api.jquery.com/load/
这篇关于jQuery：选择和操作DOM之外的HTML元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
