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);
}

有用！

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

尽管这回答了您的问题，但实际上您的HTML无效（无关紧要的</div> ）可能会使该解决方案无效。

Answer 2

好吧，JQuery是纯Javascript，但是有了JQuery，浏览器可以解析更多的Javascript，这也许就是为什么您遇到一些延迟的原因。 我不确切知道如何使用Javascript修复此问题，因为您输出的HTML无效。 不同的浏览器会对此做出不同的解释。 正确的做法是通过使用服务器端代码（例如PHP或ASP）输出正确的HTML。

Answer 3

也许您可以在发送之前通过搜索将其修复在服务器上，如果缺少，则添加它。 如果您无法在服务器上修复它，则可以使用内联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>