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 的代码要多一些。

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!

将它放在脚本的底部，或者您可以等待整个窗口加载window.onload = function() { }。或研究 DOMReady 事件。

虽然这回答了您的问题，但您拥有无效的 HTML(无关的 </div>)这一事实可能会使该解决方案无效。