I do not know anything about Jquery and would really appreciate some help or direction.
I am looking to insert all tags inside a tag into a singular tag for accessibility purposes.
The website in question is built inside a CMS(Sitefinity 14.2) where all HTML is inside a tag. Refer to below screenshots. I need to exclude all scripts and only have the tags between the Header and Footer tag inserted in the main tag.
Currently it looks like this:
<head></head>
<body>
<script>
<script>
<header>
<div>
<div>
<div>
<footer>
<script>
<script>
</body>
Whereas i am aiming for it to look like this:
<head></head>
<body>
<script>
<script>
<header>
<main>
<div>
<div>
<div>
</main>
<footer>
<script>
<script>
</body>
Below is a screenshot of the HTML.
Thank you in advance for any help or suggestions!
2
Answers
$('div').wrapAll('<main>')
would do it:Doc: https://api.jquery.com/wrapall/
Explanation
Additional to @j08691, if you want to only include divs that are not already wrapped by or , use the CSS selector
:not()
combine with jQuery. Basic about:not()
W3School.Since you have to Select
div
that are not (!) children/descendants ofheader
orfooter
and W3School only gives you a little basic about this, I’d like to explain a little bit further.Dive deeper into the Specification of CSS Selector, you’ll see that it’s possible to select elements that are not (!) children/descendants of other elements using the universal selector
(*)
. And that gives you the resultdiv:not(header *,footer *)