JavaScript - перенос содержимого в DIV, если выполняется условие

Question

У меня довольно сложная проблема.

Обычная разметка (здесь нет проблем):

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

"Витая" разметка:

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

Как видите, открывающий тег для div.content отсутствует. К сожалению, я не могу контролировать вывод в .wrapper: (

Итак, мой вопрос: как я могу определить, присутствует ли div.title, а если нет - вставить <div class="content"> (не .title) после div.wrapper?

Я знаю, как сделать это с jQuery, но мне нужно чистое решение javascript, потому что с jQuery вы получаете небольшую «задержку», прежде чем макет будет исправлен. Есть идеи?

Answer 1

Ну, JQuery - это чистый Javascript, но с JQuery гораздо больше Javascript для анализа в браузере, поэтому может быть причиной задержки.Я не знаю точно, как бы вы исправили это с помощью Javascript, потому что вы выводите неверный HTML.которые будут по-разному интерпретироваться различными браузерами.Правильнее всего было бы вывести правильный HTML с помощью серверного кода, такого как PHP или ASP.

Answer 2

Возможно, вы можете исправить это на сервере перед отправкой, выполнив поиск и, если он отсутствует, добавьте его.Если вы не можете исправить это на сервере, то вы можете сделать это с помощью встроенного javascript, но вам нужно будет добавить содержимое как переменную javascript, разобрать его, а затем записать.

Вот пример(К вашему сведению, я знаю, что RegEx не прав, но решил, что с этим все в порядке).

<div class="wrapper">
    <div class="title"> bla bla... </div>
    <script type="text\javascript">
        var content = "<div class="content"> ...content..." 
        if (!content.match(/<div class="content">/))
            content = "<div class="content">" + content;
        document.Write(content)
    </script>
    </div>
</div>

Answer 3

Существует немного больше кода без 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);
}

Это работает!

Поместите это в конец вашего скрипта, или вы можете подождатьдля всего окна, загруженного window.onload = function() { } или для исследования событий DOMReady.

Хотя это и отвечает на ваш вопрос, тот факт, что у вас неверный HTML (посторонний </div>), может сделать это решение недействительным.