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>