Use jquery to convert divs into spans

Question

I am trying to alter the HTML output of a widget I have no control over. Basically the issue is that the widget outputs HTML that uses divs inside of a p which is not valid..

<div class="widget_output">
    <ul>
        <li>
            <p>
                <div>This is a random item</div>
                <div>This is a random item</div>
                <div>This is a random item</div>
                <div>This is a random item</div>
            </p>
       </li>
       <li>
            <p>
                <div>This is a random item</div>
                <div>This is a random item</div>
                <div>This is a random item</div>
                <div>This is a random item</div>
            </p>
        </li>
</div>

My idea is to change the divs into spans which are inline elements, the HTML should then be valid. I have been looking at jquery to try and select the class and then convert these divs into spans. Can anyone point me in the right direction or a tutorial of someone achieving something similar?

Why not change from `display: block` to `display: inline`? This way you don't break any existing code with the widget that relies on them being divs. — Bailey Parker, Jul 29 '12 at 07:13
You can't reliably change the "html" with jQuery because it has been already parsed into DOM. And what kind of result you get depends on the browser, chrome creates 2 `p` elements with `div` as siblings. Please create valid html in the first place. — Esailija, Jul 29 '12 at 07:19
If I could control the HTML in the first place then this wouldn't be an issue. Ass I explicitly mentioned in my original question, I have not control over the widgets HTML ouput. — fightstarr20, Jul 29 '12 at 07:34
@fightstarr20 It depends on how you are retrieving the widget's html. You could modify its html before it's parsed. — Esailija, Jul 29 '12 at 07:38
The widgets HTML is sent by an API so as far as I can see I have no control over it :( — fightstarr20, Jul 29 '12 at 07:40

score 19 · Answer 1 · edited May 23 '17 at 12:00

19

Just stuck a JSFiddle together:

http://jsfiddle.net/daYL4/3/

$(".widget_output div").replaceWith(function() { 
    return "<span>" + this.innerHTML + "</span>"; 
});

Seems to work better than my original suggestion. But take a look at the answers to this related question, as they cover some good points:

Use jQuery to change an HTML tag?

edited May 23 '17 at 12:00

Community

1
1

answered Jul 29 '12 at 07:10

Spikeh

3,540
4
24
49

Am I missing something or does the JSFiddle result still have DIVS where I would expect to be seeing SPANS? – fightstarr20 Jul 29 '12 at 07:54
Erm, for some reason my changes didn't save... updated it now! http://jsfiddle.net/daYL4/3/ – Spikeh Jul 29 '12 at 07:58
I have tried it again but am still not seeing the DIVS as SPANS? – fightstarr20 Jul 29 '12 at 08:02
It's definitely working now. You can see that they're displaying inline though, right (i.e. one after each other, rather than on different lines). Make sure you're "inspecting" the element, rather than "viewing source", as JQuery cannot modify the rendered HTML, just the in memory HTML. – Spikeh Jul 29 '12 at 08:08
But if jQuery cannot modify the rendered HTML then surely your solution would not have any effect on the validation? – fightstarr20 Jul 29 '12 at 08:10
2

JQuery does not modify the physical HTML document - only the server side of a HTTP request can do that. A HTML document is rendered by a browser, then JQuery (or any other client side script) will modify the browser's "in memory" version of the document (which is referred to as a DOM - Document Object Model). It's incidental how all that works, however, as if you use "Inspect Element" in any browser, rather than view source, you will see the browser's DOM version... which shows any of your scripted changes. – Spikeh Jul 29 '12 at 09:53

score 2 · Accepted Answer · answered Jul 29 '12 at 07:59

2

You do not need jQuery for that, you can simply use regular expression to replace <div> tags with <span> tags. Try this:

var widgetHTML = $('div.widget_output').html();
    widgetHTML = widgetHTML
       .replace(/<div>/g, '<span>')
       .replace(/<\/div>/g, '</span>');
$('div.widget_output').html(widgetHTML);

Demo: http://jsfiddle.net/codef0rmer/daYL4/3/

answered Jul 29 '12 at 07:59

codef0rmer

10,284
9
53
76

I'm not sure why I went off thinking I would need to use jQuery, this solution seems a lot simpler. I am doing this within a wordpress site and your solution isn't working currently. I think it is just the way I have implemented it inside my functions file – fightstarr20 Jul 29 '12 at 08:06
You have to run the above code once your widget is loaded. Let me know if you get any errors? – codef0rmer Jul 29 '12 at 08:20
I think Im on the right lines, I am trying to implement it like this inside of my functions.php http://pastebin.com/k9Ax8F6b – fightstarr20 Jul 29 '12 at 08:29
Did you see any error in the console? Have you checked what you get in `widgetHTML` variable inside `my_custom_js()` function? – codef0rmer Jul 29 '12 at 08:34
I am getting the white screen of death currently so I am assuming there is something amiss with my code implementation as in a missing ; or similar? – fightstarr20 Jul 29 '12 at 08:45
without calling `my_custom_js()` function, do you get the same white screen of death? – codef0rmer Jul 29 '12 at 09:05
Yep, still get it with the call removed – fightstarr20 Jul 29 '12 at 09:10
This won't work because the regular expression looks for
and your html code has
. If you change the third line to this: `.replace(/
– dvanderb Jan 08 '14 at 20:12

Use jquery to convert divs into spans

2 Answers2

Linked