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.
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.
Share Improve this question asked Aug 18, 2016 at 21:50 d0n.keyd0n.key 1,4834 gold badges20 silver badges43 bronze badges 2- If this is what you meant: stackoverflow./questions/2802687/… – 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 Commented Aug 18, 2016 at 21:59
3 Answers
Reset to default 6There 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.
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.
You need JS, i'd use jQuery:
jQuery('<div/>', {
id: 'foo',
href: 'green.',
title: 'blue',
rel: 'external',
text: 'bee red'
}).appendTo('#yourSelector');