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.wrapper後<div class="content">（ない.TITLE）を挿入

？

任意のアイデア。私はjQueryを使ってこれを行う方法を知っていますが、レイアウトが固定される前にjQueryを使って、あなたが小さな「遅延」を取得するので、私は純粋なJavaScriptのソリューションが必要？

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() { }やイベントonDOMReady研究を搭載したウィンドウ全体を待つことができます。

これはあなたの質問にお答えしますが、無効なHTML（無関係な</div>）がこの解決策を無効にする可能性があります。

Answer 2

まあ、JQueryは純粋なJavascriptですが、JQueryにはブラウザで解析するJavascriptがたくさんあります。なぜなら、あなたは何らかの遅延を経験しているのかもしれません。私はあなたが無効なHTMLを出力しているので、これをJavascriptで修正する方法を正確にはわかりません。異なるブラウザによって異なる解釈が行われます。正しいことは、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>