HTML / CSS: Create a new element?

Question

Is there a way in CSS / HTML to create new elements, without using Javascript? So that I could import a CSS or HTML file, and load a new element, in order to be able to replace something like this:

<html>
<body>
    <div id="titlebar" style="background-color:#ff0000;">
        <label style="color:#00ff00;">This is a title</label>    
    </div>
</body>
</html>

with something like this or a similar shortening (e.g. class="titlebar"):

<html>
<body>
    <titlebar>
        This is a title
    </titlebar>
</body>
</html>

If you do not know, what I mean, please ask down there.

If this is what you meant: stackoverflow.com/questions/2802687/… — Oncodeeater
– Oncodeeater, Commented Aug 18, 2016 at 21:55
@Oncedeeater As long as I understand that one, it does not allow you to build other elements into that element (Note that my "titlebar" includes a label) — d0n.key
– d0n.key, Commented Aug 18, 2016 at 21:59

cjl750 · Accepted Answer · 2016-08-18 21:58:43Z

6

There is not a way you could programmatically create/delete/replace DOM elements like that using HTML/CSS. That would require JavaScript. You can of course manually adjust the HTML yourself, instead.

answered Aug 18, 2016 at 21:58

cjl750

4,7093 gold badges20 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

d0n.key Over a year ago

So the best method would be to code a addTitlebar("title") function in JS?

cjl750 Over a year ago

Hard to say what "best" would be in your scenario without knowing more, but, yes, one option would be to create a JS function that would, for example, look for any div with an ID of pf titlebar and replace it with <titlebar>. It's worth noting, though, that if that's what you're trying to do, you might be best off doing the find and replace in a text/code editor (e.g., Dreamweaver) and just fixing the HTML that way, if that's an option for you. Then, your HTML is right on page load, rather than always being wrong and having to be corrected by JS every time someone loads the page.

d0n.key Over a year ago

The idea is to define a collection of elements as one element in an external file, import that file, and add the whole collection by its name... Whether that is done by <collection/> or <div class="collection"/> does not matter.

cjl750 Over a year ago

As mentioned in the link provided above by Oncodeeater, though you could technically create a tag like <collection>, sticking to established HTML tags is the way to go, so that would mean <div class="collection">[content]</div>. But it's up to you whether you want to do the condensing in the external file before you import it or afterwards. That decision will determine if you go the JavaScript route or not. (I am not great at JS, so I cannot really help you there, sorry.)

d0n.key Over a year ago

I know how to do that with JS, but that way would be kind of dirty in my opinion. Still, I need a way, to import the whole collection, so when I add the <div class="collection"></div>, the label, or whatever I added to the collection in the external file, should automatically be created.

d0n.key · Accepted Answer · 2021-11-19 22:13:12Z

0

Not a direct answer to my problem, but if you're in a similar position and in need for a solution, have a look at Vue. There's also other frameworks like React and Angular, but Vue allows you to use elements just like in my sample.

answered Nov 19, 2021 at 22:13

d0n.key

1,5034 gold badges20 silver badges43 bronze badges

Comments

James Smith · Accepted Answer · 2016-08-18 22:36:12Z

-1

You need JS, i'd use jQuery:

jQuery('<div/>', {
    id: 'foo',
    href: 'green.com',
    title: 'blue',
    rel: 'external',
    text: 'become red'
}).appendTo('#yourSelector');

answered Aug 18, 2016 at 22:36

James Smith

11 silver badge

Collectives™ on Stack Overflow

HTML / CSS: Create a new element?

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related