jQuery：选择和操作DOM之外的HTML元素

更新时间：2023-11-03 09:55:10

我正在纠正我的错误评论。是的，你可以这样做这样的 ，但阅读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/

上一篇 : ：从 Dom 元素获取 CSS 路径下一篇 : 在vb.net图片框控件中显示bing map

jQuery：选择和操作DOM之外的HTML元素

相关阅读

推荐文章