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: http://stackoverflow.com/questions/2802687/is-there-a-way-to-create-your-own-html-tag-in-html5 — Oncodeeater, Aug 18 '16 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, Aug 18 '16 at 21:59

score 5 · Accepted Answer · answered Aug 18 '16 at 21:58

5

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 '16 at 21:58

cjl750

4,380
3
15
27

So the best method would be to code a `addTitlebar("title")` function in JS? – d0n.key Aug 18 '16 at 22:02
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 ``. 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. – cjl750 Aug 18 '16 at 22:07
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 `` or `
` does not matter. – d0n.key Aug 18 '16 at 22:10
As mentioned in the link provided above by Oncodeeater, though you could technically create a tag like ``, sticking to established HTML tags is the way to go, so that would mean `
[content]
`. 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.) – cjl750 Aug 18 '16 at 22:20
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
, the label, or whatever I added to the collection in the external file, should automatically be created. – d0n.key Aug 18 '16 at 22:34

score 0 · Answer 2 · answered Aug 18 '16 at 22:36

0

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 '16 at 22:36

James Smith

1
1

score 0 · Answer 3 · answered Nov 19 '21 at 22:13

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 '21 at 22:13

d0n.key

1,318
2
18
39

HTML / CSS: Create a new element?

3 Answers3