<body> <div id="myDiv"> <p>Hello, world!</p> </div> <script> var div = document.getElementById("myDiv"); var newPara = document.createElement("p"); newPara.textContent = "Goodbye, world!"; var oldPara = div.querySelector("p"); div.replaceChild(newPara, oldPara); </script> </body>
Question 1/15
Question 2/15
Question 3/15
Question 4/15
Question 5/15
Question 6/15
<body> <ul> <li>Item 1</li> <li>Item 2</li> </ul> <script> var list = document.querySelector("ul"); var item = document.createElement("li"); item.textContent = "Item 3"; list.insertBefore(item, list.firstElementChild); </script> </body>
Question 7/15
Question 8/15
Question 9/15
Question 10/15
Question 11/15
<body> <div id="myDiv"> <p>Hello, world!</p> </div> <script> var div = document.getElementById("myDiv"); var newPara = document.createElement("p"); newPara.textContent = "Goodbye, world!"; div.appendChild(newPara); </script> </body>
Question 12/15
Question 13/15
Question 14/15
Question 15/15
Your Answers
Question 1/15
The querySelector() method is used to select the first element that matches a CSS selector in JavaScript. This method returns the first element that matches the specified selector.
Question 2/15
<body> <div id="myDiv"> <p>Hello, world!</p> </div> <script> var div = document.getElementById("myDiv"); var newPara = document.createElement("p"); newPara.textContent = "Goodbye, world!"; var oldPara = div.querySelector("p"); div.replaceChild(newPara, oldPara); </script> </body>
The code selects the HTML div element with the ID "myDiv" using the getElementById() method and assigns it to the variable div. It then creates a new paragraph element using the createElement() method and assigns it to the variable newPara. The textContent property of the new paragraph is set to "Goodbye, world!". The querySelector() method is then used to select the existing paragraph element inside the div, and the replaceChild() method is used to replace it with the new paragraph element.
Question 3/15
The innerHTML() method is used to get or set the HTML content of an element in JavaScript. This method returns the HTML content of the specified element, or sets the HTML content to the specified value.
Question 4/15
The createElement() method is used to create a new HTML element in JavaScript. This method returns a new element object that can be added to the DOM using other DOM manipulation methods.
Question 5/15
Both replaceWith() and replaceChild() are JavaScript methods used to replace one HTML element with another. However, there are some key differences between these methods.
The replaceWith() method is used to replace an HTML element with one or more new elements. It takes one or more element or text node arguments, which are inserted into the DOM in place of the original element. The original element is then removed from the DOM.
On the other hand, the replaceChild() method is used to replace a single child element of a parent element with a new element. It takes two arguments: the new element to be inserted and the existing child element to be replaced. The new element is inserted into the DOM in place of the existing child element, and the existing child element is removed from the DOM.
Another difference between these methods is their browser compatibility. The replaceWith() method is a relatively new addition to the DOM API and is not supported by some older browsers, whereas the replaceChild() method is more widely supported.
In summary, the main differences between replaceWith() and replaceChild() are the type of replacement operation, the number of elements that can be replaced, and the browser compatibility of the methods.
Question 6/15
<body> <ul> <li>Item 1</li> <li>Item 2</li> </ul> <script> var list = document.querySelector("ul"); var item = document.createElement("li"); item.textContent = "Item 3"; list.insertBefore(item, list.firstElementChild); </script> </body>
The code selects the first HTML unordered list using the querySelector() method and assigns it to the variable list. It then creates a new list item using the createElement() method and assigns it to the variable item. The textContent property of the new list item is set to "Item 3". The insertBefore() method is then used to insert the new list item before the first list item in the list. Therefore, the correct answer is a) A list with three items: "Item 3", "Item 1", and "Item 2".
Question 7/15
The classList.add() method is used to add a class to an HTML element in JavaScript. This method takes one argument: the name of the class to be added.
Question 8/15
The removeChild() method is used to remove an HTML element from the DOM in JavaScript. This method removes the specified child element from its parent element.
Question 9/15
Both getElementsByClassName() and querySelectorAll() are JavaScript methods used to select elements from the DOM. However, there are some key differences between these methods.
The getElementsByClassName() method selects elements by their class name and returns a live HTMLCollection of elements that match the specified class name. This means that any changes to the DOM that affect the selected elements will be automatically reflected in the returned collection.
On the other hand, the querySelectorAll() method selects elements by any valid CSS selector and returns a static NodeList of elements that match the selector. This means that the returned NodeList will not be updated if the DOM changes after the method is called.
Another difference between these methods is their browser compatibility. The getElementsByClassName() method is supported by most modern web browsers, including older versions of Internet Explorer, whereas the querySelectorAll() method is not supported by some older browsers.
Question 10/15
The replaceChild() method is used to replace an HTML element with another HTML element in JavaScript. This method replaces the specified child element with the specified new element.
Question 11/15
<body> <div id="myDiv"> <p>Hello, world!</p> </div> <script> var div = document.getElementById("myDiv"); var newPara = document.createElement("p"); newPara.textContent = "Goodbye, world!"; div.appendChild(newPara); </script> </body>
The code selects the HTML div element with the ID "myDiv" using the getElementById() method and assigns it to the variable div. It then creates a new paragraph element using the createElement() method and assigns it to the variable newPara. The textContent property of the new paragraph is set to "Goodbye, world!". The appendChild() method is then used to add the new paragraph element to the end of the div.
Question 12/15
The classList.remove() method is used to remove a class from an HTML element in JavaScript. This method takes one argument: the name of the class to be removed.
Question 13/15
The appendChild() method is used to add an HTML element to the end of a parent element in JavaScript. This method appends the specified element as the last child of the parent element.
Question 14/15
The classList.contains() method is used to check if an HTML element has a particular class in JavaScript. This method returns a Boolean value indicating whether the element has the specified class.
Question 15/15
getElementById() method is used to select an element by its ID in JavaScript. This method returns a single element object that matches the ID provided.