Menu
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>
458
Note: The contents or elements inserted using the jQuery before() and after() methods is added outside of the selected elements.
jQuery attribute methods allows you to manipulate attributes and properties of elements. Use the selector to get the reference of an element(s) and then call jQuery attribute methods to edit it. Important DOM manipulation methods: attr(), prop(), html(), text(), val() etc.
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/
156
You can use javascript to manually create DOM elements that are not inserted into the DOM hierarchy and you can manipulate them as much as you want before inserting them into the DOM.
But, if you're trying to manipulate DOM elements that are created by your page HTML before that page HTML has been parsed, you cannot do that. The DOM elements don't exist at that point so there's nothing to manipulate unless you manually created them as described in the first paragraph.
Some operations only work on DOM elements inserted into the DOM hieararchy such as document.getElementById(), but other methods can be used on a piece of DOM that isn't in the main hierarchy such as item.getElementsByClassName() where item is a DOM element not in the DOM hierarchy.
In jQuery, the default context is the document so a simple selector operation like $(".foo") will only search DOM elements in the DOM document hierarchy. But, if you pass a specific context, $(".foo", item), then the jQuery selector will search that context, not the main document.
10
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
