Deleting completely a html element - javascript

I am aware of .remove() , I am using it and its working fine, I mean its removing the element which I want. But I think it doesn't removes it permanently. On right clicking in browser window selecting View page source I am still able to see those removed elements.
I want to remove them completely or say permanently.
Please help.

.remove() removes them completely. The reason you still seem then in the view page source is because the page source does not change based on javascript. The page source shows how the page originally looked when it was first loaded, not how it currently is.
If you look in the developers console, you will see that they are no longer there.
Likewise, if you dynamically add a new element with javascript/jquery, it will not show that element in the page source.

Page Source and DOM are two different different things, whenever you edit the elements or remove them it get removes from DOM and not from page source. That means The javascript manipulate the DOM not the source which come from the server.
DOM: The Document Object Model (DOM) is an application programming interface (API) for valid HTML and well-formed XML documents.
The view source always shows the content came from the server initially without any modification. Use DEVELOPER CONSOLE in browsers to see the live DOM manipulation.
Note: Press F12 to enable console on major browser

view source render the code within the page that you have written(static)
for dynamic changes/view inspect the elements tab in developer tools.

View page source shows the content of the original HTML file, as returned by the HTTP server. The DOM can be altered with javascript, but the source will not change.

You Cannot permenantly remove the dom elements using jquery or javascript. .remove() is totally different from your logic. just it removes temporary hide from the dom elements suppose you refresh the page it comes again it is jquery magic.

Related

Executing external JS using innerHTML and appendChild

I've been playing around with the Material Design Lite library that Google just launched a few days ago, but have some questions, specifically on how to initiate (or execute?) external JS when the HTML changes using innerHTML and appendChild.
See the first example here. As you can see, the HTML for the menu is already within the HTML file when it is first loaded so the menu works fine.
But in this example, the HTML of the document is modified using JS. However, the menu does not work anymore because the script is not executing, I think.
How can I resolve this issue? What's a better way to achieve this result? I'm a newbie when it comes to JavaScript.
You will need to attach the proper event listener from the library. With this change (adding componentHandler.upgradeAllRegistered(); after appending the item) it should work:
document.body.appendChild(menu);
componentHandler.upgradeAllRegistered();
When the menu button is inserted dynamically (when the user clicks), it doesn't get assigned the event listeners to show the menu. I'm guessing that the material design library parses the HTML when it (the library) gets loaded (since you're loading it at the bottom of your HTML document). Since it's already loaded by the time the user clicks, it doesn't check the new element that has been inserted and can't assign it the event listeners.
If this is the case, you'll need to find a way to get the library to recognize your new button.

Javascript DOM-event origin and dependencies

Imagine that there's a button on one web page (not mine) and when it's clicked it performs some
Javascript. I want to have a button on my web page that performs exactly the same. So I need to
attach all necessary js files (but first I have to find them) to my html page and sometimes add some js to my html page.
What I usually do in this case? I inspect this button html element to see if there's onclick attribute for this button. If it is, I see the function called when button is clicked and then I try to search for this function in current html page and all js files attached to page. Also I need to find all dependencies (like jQuery, fancybox etc.).
If the button doesn't have onclick attribute I have to look for direct getElementById or jQuery selector pointing to this button with rest of code there. Sometimes there's no such a selector and I have to find a nested selector - really hard and annoying thing.
Is there any better, automated way for doing things above. Ideally after selecting the element in DOM (button in this case) and pressing some magic button I will be able to see all js files involved in processing this click and also js code in html page.
It's going to involve digging no matter what you do. But Chrome's Dev Tools can help with the attached event handlers, to an extent. When you right-click an element and inspect it, on the right-hand side there's a panel showing various tabs: [Styles] [Computed] [Event Listeners] [DOM Breakpoints] [Properties]. The [Event Listeners] one shows the listeners directly attached to that element. Of course, on a site using jQuery (which is more than half the sites using JavaScript at all), looking at the handler will dump you into the jQuery event handling code, but it's a start.
Just as a side point: While it's fine to look at the source of pages for inspiration, or to see how they solved a particular problem, or what plugins they're using to get an effect, etc., I assume you're not grabbing large sections of their actual code (as opposed to libraries and plugins with liberal licenses) without their permission, which is probably not cool.

Chrome Developer Tools - Dynamically Created Element

Is there a way to find out which JS script created a dynamic element in Chrome's Developer Tools? If I do 'view page source' on the page, the element isn't there. I can see the element though in Chrome's Developer Tools. Is there a way to find out specifically which JavaScript file and what line in my JavaScript file created the element?
To help clarify: I know which element is created...what I don't know is which .js file created it and specifically what line in that .js file
Updated answer:
Below you've said:
I know which element it is...what I don't know is which .js file created it and specifically what line in that .js file
That's not how the question originally read. :-)
If you know which element it is, two options for you:
You can use Dev Tools to trigger a breakpoint when its parent element is modified:
Load the page
Open Dev Tools
Go to the Elements panel
Navigate to the parent element that the target element will eventually be added to
Right-click the parent element and click Break on... > Subtree Modifications
Now, Chrome will trigger a breakpoint when the parent element's subtree is modified, and so you can see what JavaScript code is adding the element.
Unfortuantely, it won't fire that breakpoint if the element is added during the main loading of the page (e.g., during the parsing of the HTML, by script that runs immediately rather than waiting).
If there's any text in the element that seems specific to it (content, id, class, some attribute, whatever), once the page is loaded you can use Chrome's powerful search feature to try to find that text:
Load the page
Open Dev Tools
Go to the Sources tab
Click Ctrl+Shift+F, which is "find in files" — it looks in all of the files associated with the page, not just the "current" file
Type the text that you think might help you identify the code adding the element
Press Enter, all matches will be shown below
You can even use regular expressions.
Original answer:
No, there's no simple way to differentiate an element created via JavaScript after page load from ones created by the initial HTML parsing.
Or at least, there isn't without adding JavaScript to the page that runs before any other JavaScript on the page runs, which I'm guessing is a requirement.
But if you can add JavaScript to the page before any other JavaScript runs, it's actually really easy to do:
Array.prototype.forEach.call(document.querySelectorAll("*"), function(element) {
element.setAttribute("data-original", "");
});
That marks every single element on the page with an attribute that tells you it was there when that code ran. You can see those attributes in the Elements panel of the Dev Tools. And so, if you see an element that doesn't have that attribute, you know it was added later.
document.querySelectorAll("*") is a big hammer you probably wouldn't want to use in production code, but for temporary use when debugging/developing, it's fine.
And if you want to know about the elements that have been created by other code later, you can do this in the console:
Array.prototype.forEach.call(document.querySelectorAll("*"), function(element) {
if (element.getAttribute("data-original") === null) {
console.log(element);
}
});
That'll output every element that wasn't on the page when you ran the earlier code, and Chrome's console is really cool — you can right-click the element display in the console and choose "Reveal in Elements panel" to see exactly where that element is.
You can use chrome-devtools-protocol's experimental feature.
Check this, https://chromedevtools.github.io/devtools-protocol/tot/DOM/#method-getNodeStackTraces
First, send 'DOM.setNodeStackTracesEnabled' to chrome dev protocl.
Second, use 'DOM.getNodeStackTraces' message.
So, you can get call stack information from dynamic creation element.
I wrote my own program using these functions.
Image: https://imgur.com/a/TtL5PtQ
Here is my project: https://github.com/rollrat/custom-crawler

How to track which Javascript manipulates with a given HTML element?

I'm trying to understand how a template works. If I'd open one in a browser I will see some elements. But If I'd explore the HTML code - the containers with elements appeared in the browser is just empty. This is simple: that means that those containers manipulated by some JS code. However I tried to find the container ID in all JS files mentioned by the main HTML document and not succeeded.
I think that I need some tool which will allowed me to track the JS which changes the given element (place a break-point or make a HTML change log...).
Is there any useful way to do this thing?
It sounds to me all you want is the Web developer's console. In Chrome it is available through Ctrl+Alt+J (Cmd instead of Ctrl for Macs) and in Firefox with Ctrl/Cmd+Alt+K. Alternatively, simply find those buttons in the browser's options/settings menu.
Once you have the console open, click the mouse-pointer icon to manually select any element on the screen you want for inspection. You can also look at the HTML DOM tree directly on the HTML tab. It's all very visual, interactive and intuitive, so just explore a bit.
you can use console.log('// your breakpoint text'); in javascript. It will be shown in your browser console. That way you can track javascript execution flow.
But the tracking process depends on you. You have to do it manually. Try placing the console.log() from the beginning.
In chrome's dev tool. Find the tab with title "Console". Your breakpoint text will be shown there.
You can use debugger; where you add html to dom and by using the console you can check in realtime how your javascript is running.
Another way is to have alerts which you keep on shifting to the next code execution until it goes away from the DOM

Manipulate DOM before it is shown to the user?

I'm not too familiar with javascript, is there a way to manipulate the DOM before the page is displayed to the user?
I'm using GWT which makes you create the page elements via javascript. This is kind of convenient, but it appears that all the javascript code is executed after the page is first shown to the user. This has the effect of showing the page as a blank white screen, then all the UI elements popping onto screen. The effect is really apparent when switching between pages.
If I were using php or jsp, it looks like the page ui elements are already prerendered and the browser won't show a blank white screen before display.
So is there any hook in javascript where we can manipulate the DOM before the browser clears out the contents of the last page shown?
-------------------------------- Edit ----------------------------------------
#Cipi: I'm not sure if this will work, but I can try. I think it will be the same problem though? I still see it happening like this:
User is already on one of my pages.
User clicks a link.
Browser starts fetching contents of new url, but the contents are simply an empty html file with just a javascript link in it.
After page is done downloading, browser renders the html (this is just a white screen).
Now the javascript starts executing in response to the onLoad() event(?), building the UI.
A few ms later, the DOM is done being manipulated, and is finally presented to the user.
so I am thinking that your solution would take place on #5, but by then the browser has already rendered the contents of the initial page on step #4?
#Crozin: I'm looking into DOMContentLoaded now, seems specific to gecko based browsers but there are solutions for ie etc. Yeah I basically want to manipulate the dom before the browser renders anything for the new page to screen, hopefully that can do it.
Thanks
Yes there are two methods:
Use DOMContentLoaded event
In the following code:
....
<p id="abc">abc</p>
<script type="text/javascript"> CODE HERE </script>
<p id="def">def</p>
Element with id abc is avaiable, but the one with id def ain't.

Categories

Resources