CSS styling does not apply to HTML elements that are dynamically created using JavaScript

Question

CSS styling does not apply to HTML elements that are dynamically created using JavaScript

A script containing dynamic HTML content is sourced from an external website, injected by RSS feeds. To access the content directly, visit this link.

The script needs to be wrapped around HTML tags for front-end display. For example:

<div>http://feed.informer.com/widgets/J9HBCBNMTQ.js</div>

In order to avoid cluttering the HTML file with numerous scripts, you can use JavaScript to inject the script wrapped in a body tag. This way, new pages can be created on button clicks without creating separate HTML files.

By using JavaScript functions like page1(), page2(), and nextpage(), you can dynamically generate content based on user interaction.

CSS can also be used to hide specific divs within the script-generated content. However, there might be challenges when applying CSS externally or internally, as the divs (#text1, #text2, etc.) are part of the script's HTML content itself.

javascript html css

Answer 1

Answer №1

It's incredible to see that

location.replace('javascript:page' + page + '()')

actually works. I was able to hide images simply by moving the css into the returned html.

function page1() {
    return "<html><head><style>.heraldone #text2,.heraldone #text3,.heraldone #text4,.heraldone #text5 {display: none;}</style></head><body class='heraldone'><script src='http://feed.informer.com/widgets/J9HBCBNMTQ.js'><\/script><\/body><\/html>";
}

function page2() {
    return '<html><body>Hello world (2)</body></html>';
}

function nextpage(page) {
    if (!document.image) {
        location.replace('javascript:page' + page + '()');
    } else {
        location.href = 'javascript:page' + page + '()';
    }
}

I'm not sure what you're trying to achieve, but personally, I would have opted to replace the body content of the main html page instead of relying on whatever mysterious process is making this work correctly. This approach would result in smaller and more coherent html pages. For example, something like

var pages = ['<script ... />', 'Hello world']; document.getElementsByTagName('body')[0].innerHTML = pages[page-1];

Answer 2

It's incredible to see that

location.replace('javascript:page' + page + '()')

actually works. I was able to hide images simply by moving the css into the returned html.

function page1() {
    return "<html><head><style>.heraldone #text2,.heraldone #text3,.heraldone #text4,.heraldone #text5 {display: none;}</style></head><body class='heraldone'><script src='http://feed.informer.com/widgets/J9HBCBNMTQ.js'><\/script><\/body><\/html>";
}

function page2() {
    return '<html><body>Hello world (2)</body></html>';
}

function nextpage(page) {
    if (!document.image) {
        location.replace('javascript:page' + page + '()');
    } else {
        location.href = 'javascript:page' + page + '()';
    }
}

I'm not sure what you're trying to achieve, but personally, I would have opted to replace the body content of the main html page instead of relying on whatever mysterious process is making this work correctly. This approach would result in smaller and more coherent html pages. For example, something like

var pages = ['<script ... />', 'Hello world']; document.getElementsByTagName('body')[0].innerHTML = pages[page-1];

Answer 3

Answer №2

The specific styles you mentioned (#text2 - ...5) are actually not found within the javascript code provided. The only relevant style defined for any of those #text elements is

#text3 {z-index: 2;position:absolute; margin-top: 50%;}

Therefore, it seems necessary to add these styles to the referenced js files since they are not included anywhere else.

Answer 4

The specific styles you mentioned (#text2 - ...5) are actually not found within the javascript code provided. The only relevant style defined for any of those #text elements is

#text3 {z-index: 2;position:absolute; margin-top: 50%;}

Therefore, it seems necessary to add these styles to the referenced js files since they are not included anywhere else.

CSS styling does not apply to HTML elements that are dynamically created using JavaScript

Answer №1

Answer №2

Similar questions

Unable to transform object into a primitive value using imported JSON data

Replacing CSS using jQuery/JavaScript

Tips for setting discrete mapper style in cytoscapejs?

Setting a TypeScript collection field within an object prior to sending an HTTP POST request

Utilizing JavaScript to Parse RSS XML Feeds Across Domains

Arranging Bootstrap 4 columns in a vertical stack

How to identify the node with the appropriate date range attribute using JavaScript or jQuery

Implementing a Context Menu with a Single Click

flex display doesn't automatically wrap long strings as intended

Unable to retrieve key value pairs of objects

Concerns arise regarding the implementation of an image slider using HTML and CSS

I encountered an issue where the error "data.map is not a function" occurs whenever I try to execute a React component

Click on a specific button within a DataTable row

Organize your information starting from the left and moving to the right

Adding a logo to a website that utilizes CSS, HTML, JS, and Bootstrap

What is the best way to extract data from an HTML string stored as a JSON value using Python?

Using jQuery to check if a value exists in a PHP array

jQuery UI Sortable - Eliminate placeholder once item is has been dropped

Customize the antd theme in a create-react-app project without the need to eject webpack

Leverage the power of the YouTube API to determine if a video is able to be embedded