Display HTML in JavaScript without altering the Document Object Model

Question

Display HTML in JavaScript without altering the Document Object Model

Is it possible to style a custom HTML tag called "location" without directly modifying the DOM?

For instance, having

<location loc-id="14" address="blah" zipcode="14" />

Would it be feasible to render it like this:

<div class="location">
    <div>Blah></div>
    <div>14></div>
</div>

I am aware that I could extract data from attributes and create new elements in the DOM, but I'm interested in exploring options that do not involve direct DOM manipulation.

It may sound unlikely, but I wanted to inquire about the possibility.

javascript jquery html css dom

Answer 1

Answer №1

To achieve this effect, you can utilize the :before and :after pseudo elements in CSS:

<style>
  address:before {
    content: attr(location);
    text-transform: capitalize;
    display: block;
  }

  address:after {
    content: attr(postalCode);
    display: block;
  }
</style>
<address addr-id="45" location="example" postalCode="12345" />

Resulting in:

Example
12345

Answer 2

To achieve this effect, you can utilize the :before and :after pseudo elements in CSS:

<style>
  address:before {
    content: attr(location);
    text-transform: capitalize;
    display: block;
  }

  address:after {
    content: attr(postalCode);
    display: block;
  }
</style>
<address addr-id="45" location="example" postalCode="12345" />

Resulting in:

Example
12345

Display HTML in JavaScript without altering the Document Object Model

Answer №1

Similar questions

execute a function upon selecting a radio button

After refreshing the page, the data stored in the localStorage array gets replaced

Using AngularJS's ng-repeat directive to convert expressions into JavaScript code

Avoiding repeated execution of event handlers in subviews of Backbone

Getting Permission in the latest Facebook JavaScript SDK: A Step-by-Step Guide

How does React determine if a component is a class component or a functional component?

I am having difficulty retrieving the JSON object that was sent by the servlet

"Enhance input functionality by updating the value of the text input or resizing the textbox

Automatically print multiple HTML files with a printer or a Network Printer

Is there a way to create a transparent color for the Dropdown Toggle?

Is there a way for me to access the information on a web page?

Height of the Accordion List

TinyMce editor's WYSIWYG settings are not functioning properly on IE9

When a mobile device is rotated, the screen on a jQuery application will automatically shrink

Problems arising from positioning elements with CSS and organizing list items

Understanding the mechanics of utilizing node modules and requiring them within an Express 4 router

Having trouble retrieving the desired data from the JSON file

Introduce new router events, routeChangeStart and routeChangeComplete, within the client-side components of next js 14

The error message "Unexpected TypeError: useSearchParams either does not exist as a function or is not iterable in its return value

Unable to showcase array JSON values on HTML using ng-model