Extracting responseXML data specifically for CSS styling purposes

Question

Extracting responseXML data specifically for CSS styling purposes

I am working on a simple XMLHttpRequest setup that fetches data from an xml file and displays it in a div on my webpage within a ul element:

var requestData;
if (window.XMLHttpRequest){
    requestData = new XMLHttpRequest();
}else{
    requestData = new ActiveXObject("Microsoft.XMLHTTP");
}
requestData.open("GET", "data.xml");
requestData.onreadystatechange = function(){
    if((requestData.readyState ===4) && (requestData.status ===200)){
        var itemList = requestData.responseXML.getElementsByTagName('title');
        var outputData = "<ul>";
        for (var i=0; i<itemList.length; i++){
            outputData += "<li>" + itemList[i].firstChild.nodeValue + "</li>";
        }
    outputData += "</ul>"
    document.getElementById('update').innerHTML = outputData;
    }
}
requestData.send();

The data is being displayed correctly on the page, but when I check the source code, the new list structure is not visible in the html. Additionally, when I try to style the newly fetched list using CSS like below:

$('document').ready(function(){
    var cssStyle = {
        "background-color": "#333",
        "color": "#FFF",
    }
    $("ul:last li").css(cssStyle);
});

It doesn't seem to have any effect. After importing the data into my html, how can I target it with CSS and apply styling?

javascript

Answer 1

Answer №1

Content is loaded using ajax, so it will not appear in the view source. It's recommended to apply styles after making the request, rather than on document ready. Alternatively, you can use classes instead of inline styles, allowing the styles to automatically update when loading HTML onto the page.

You can view new content in Chrome or Firefox by inspecting the element.

request.onreadystatechange = function () {
    if ((request.readyState === 4) && (request.status === 200)) {
        console.log(request);
        var items = request.responseXML.getElementsByTagName('title');
        output = "<ul>";
        for (i = 0; i < items.length; i++) {
            output += "<li>" + items[i].firstChild.nodeValue + "</li>";
        }
        output += "</ul>"
        document.getElementById('update').innerHTML = output;
        var cssObj = {
            "background-color": "#333",
                "color": "#FFF",
        }
        $("ul:last li").css(cssObj);
    }
}

View demo

Answer 2

Content is loaded using ajax, so it will not appear in the view source. It's recommended to apply styles after making the request, rather than on document ready. Alternatively, you can use classes instead of inline styles, allowing the styles to automatically update when loading HTML onto the page.

You can view new content in Chrome or Firefox by inspecting the element.

request.onreadystatechange = function () {
    if ((request.readyState === 4) && (request.status === 200)) {
        console.log(request);
        var items = request.responseXML.getElementsByTagName('title');
        output = "<ul>";
        for (i = 0; i < items.length; i++) {
            output += "<li>" + items[i].firstChild.nodeValue + "</li>";
        }
        output += "</ul>"
        document.getElementById('update').innerHTML = output;
        var cssObj = {
            "background-color": "#333",
                "color": "#FFF",
        }
        $("ul:last li").css(cssObj);
    }
}

View demo

Extracting responseXML data specifically for CSS styling purposes

Answer №1

Similar questions

Uncovering the origin of surprising reactivity issues in Vue 3 component workings

How can I combine an onkeypress and onclick event listener in one method?

Tips for emphasizing a specific cell in a row based on its expiration date

Struggling to retrieve an Object from an HTMLSelectElement within an Angular project

"Exploring the MUI Data Grid: A Step-by-Step Guide to Adding a Summary Row

The jqxgrid from jqwidget is displaying all content in a single, messy column

React Navigation Item Toolbar Misplacement

What is the best way to create a personalized email form using javascript and reactjs without it opening in a new window?

The deletion function necessitates a switch from a server component to a client component

The z-index property in jQuery dialog does not seem to function properly when used within an

Shift a div out of view (using margin: 0px auto)

Greasemonkey: Enhance HTML Files by Highlighting Multiple Words

Use radio buttons to enable switching between different data options within a dropdown menu

Using ChartsJs to visualize input data formatted in the German data format

Struggling to pinpoint the exact element in Python/Selenium

The node server.js encountered an error - Module not found

Retrieve specific information by clicking a button within a table cell on the data grid in React.js

Creating one div to initiate the contents to fadeToggle and another div to cease the fadeToggle animation utilizing the setInterval function in JavaScript

Guidelines for implementing drag and drop functionality for my specific scenario

Implementing postcompose functionality from OpenLayers 3 into an OpenLayers 6 event within a Vue Single Page