dom

JavaScript append and prepend vs jQuery append and prepend

由 北城以北 提交于 2020-06-27 11:08:40
问题 QA Style I recently read an article and it says that JavaScript has implemented append and prepend methods inspired from jQuery. It was a new knowledge for me because as far as I know to append an element, I had to use element.appendChild and to prepend an element, I had to use element.insertBefore(newElement,element.children[0]) . But jQuery's append and prepend have lots of features like accepting multiple arguments. So my question is What are all the differences between JavaScript's append

Append new attribute with setAttribute()?

由 女生的网名这么多〃 提交于 2020-06-25 09:15:49
问题 I have a div element and would like to append new style attributes to it. I have tried to do it like this: element.setAttribute('style', 'property: value'); And it works, but if that element already had styles applied, they will all get overwritten. Lets say I have this situation: HTML: <div id="styled"></div> JavaScript: var styled = document.getElementById('styled'); styled.setAttribute('style', 'display: block'); This works, but if I need to append another style lets say: styled

Restore exact innerHTML to DOM

由 允我心安 提交于 2020-06-25 07:27:11
问题 I'd like to save the html string of the DOM, and later restore it to be exactly the same. The code looks something like this: var stringified = document.documentElement.innerHTML // later, after serializing and deserializing document.documentElement.innerHTML = stringified This works when everything is perfect, but when the DOM is not w3c-comliant, there's a problem. The first line works fine, stringified matches the DOM exactly. But when I restore from the (non-w3c-compliant) stringified ,

$(document).on() in plain JavaScript?

由 |▌冷眼眸甩不掉的悲伤 提交于 2020-06-24 22:49:13
问题 In jQuery there is .on() which can be used as: $(document).on('click', '.foo', function() { /* ... */ }); This listens for click events on all DOM elements with the class .foo . However, this also listens for any eventual elements added to the DOM later, so it is not equal to: var elements = document.getElementsByClassName('foo'); for (var element in elements) { element.addEventListener('click', function() { /* ... */ }); } How do I do this in plain JavaScript? Am I supposed to use a

ReactJS - render called, but DOM not updated

由 只愿长相守 提交于 2020-06-24 21:43:07
问题 This has happened to me a few times. I have always managed to work around the issue, yet I am still intrigued to understand why this happens, and what I have missed. Essentially if I have a condition within my render method which specifies the class for my div : let divClass = this.state.renderCondition ? 'red' : 'blue'; By default I set renderCondition within my state to false. If I then define an onClick handler on a button (as follows), and click the button, whilst render IS called, the

Manipulate the <html> or <body> tag in React

由 ≯℡__Kan透↙ 提交于 2020-06-24 07:16:12
问题 What is the best way to manipulate the <html> or <body> tags in React? For example, dynamically setting 'lang' attribute or change classes? <html lang="en" class="ltr"> I could do that using raw DOM manipulation. But is this the right way? 回答1: I've just encountered this use case where I want to modify the <html> lang attribute when language is switched by the user. React Helmet made this quite simple actually. Just get the lang from your react state and pass it to the Helmet component

Selenium: How selenium identifies elements visible or not? Is is possible that it is loaded in DOM but not rendered on UI?

由 烈酒焚心 提交于 2020-06-19 03:09:27
问题 Selenium: How selenium identifies elements visible or not? Is is possible that it is loaded in DOM but not rendered on UI? I would like to verify a scenario where element is clickable, I know web drive has method "ElementToBeClickable" however, I would like to know the inner working. Please help me on this. Also,how to handle a scenario where the element is loaded in the DOM but UI shows loading in progress, how to wait for complete load? Please let me know, if the UI is not loaded then will

where to place my script tag before closing of</body> or after it [duplicate]

由 和自甴很熟 提交于 2020-06-17 18:23:57
问题 This question already has answers here : Where should I put <script> tags in HTML markup? (22 answers) Closed 5 years ago . As we many of know that we have to include external jsscript file at the end of page. for performance and usability purpose. I want to know the correct place where to place it. means <boby> <!--html here -- > <script src= ""> <!-- here ??? -- > </body> <script src= ""><!-- here ??? -- > before the closing of script tag or after the closing of script . Is there any

HighCharts: set an id for a spline data set?

由 纵饮孤独 提交于 2020-06-17 09:45:07
问题 I'm creating a HighCharts spline chart with multiple data sets. It all works fine... Now I want to get at the <path> element for each curve so I can use SVG functions like path.getTotalLength() Can I set an id or something in the JSON data that will appear in the <path> so I can get to it via document.getElementById(id) or a similar unambiguous method? Here what I've tried: I know can set a 'className' in my JSON and that className will appear in the <g> parent node of the <path> (and in

Run my Javascript code on every page on my browser, similar to how a chrome extension would

由 匆匆过客 提交于 2020-06-16 06:47:47
问题 I know with Chrome I can use snippets to manually run some js code on a webpage. But This required manually executing the snippet. is there any way to have some JS code that my browser (chrome or firefox) would every time I visited a new page? 回答1: You may be looking for userscripts. These allow you to write Javascript code which will then be automatically executed whenever you visit a page matching a particular pattern. For example, the following userscript: // ==UserScript== // @name
订阅 dom