Question

I have a fairly complicated problem.

The usual markup (no problems here):

   <div class="wrapper">
    <div class="title"> bla bla... </div>
    <div class="content"> ...content... </div>
   </div>

The “twisted” markup:

   <div class="wrapper">
       ...content... </div>
   </div>

As you can see the opening tag for div.content is missing. Unfortunately I have no control over the output within .wrapper 🙁

So, my question is: how can I detect if div.title is present, and if not – insert <div class="content"> (not the .title) after div.wrapper ?

I’m aware how to do this with jQuery, but I need a pure javascript solution because with jQuery you get a small “delay” before the layout gets fixed. Any ideas?

Answer 1

There is a fair bit more code without jQuery.

var divs = document.getElementsByTagName('div'),
    foundTitleDiv = false;

for (var i = 0, divsLength = divs.length; i < divsLength; i++) {
    if (divs[i].className.match(/\btitle\b/)) {
        foundTitleDiv = true;
        break;
    }
}

if (foundTitleDiv) {
    var wrapper = document.createElement('div'); 
    wrapper.className = 'content';
    var div = divs[i]; 
    wrapper.appendChild(div.cloneNode(true));
    div.parentNode.replaceChild(wrapper, div);
}

It works!

Place this at the bottom of your script, or you can wait for the entire window loaded with window.onload = function() { } or research onDOMReady events.

Whilst this answers your question, the fact you have invalid HTML (the extraneous </div>) may make this solution invalid.