javascript - DOM ノードを Ajax レスポンスに置き換える

Question

次のような ajax 応答があります。

<div class = "element3"> some other text</div>

そして、次の要素1をrespに置き換えたい:

<div class = "a">
  <div class = "element1"></div>
  <div class = "element2"></div>
</div>

したがって、置換後、次のようになります。

<div class = "a">
  <div class = "element3"> some other text</div>
  <div class = "element2"></div>
</div>

replaceChild() を試しましたが、応答が DOM オブジェクトではないため機能しません。

ありがとう！

Answer 1

innerHTML()タグ間のコンテンツのみを置き換えるものとは異なりouterHTML()、開始タグと終了タグも置き換えることができ、DOM ノードを効果的に置き換えることができます。

var element = document.getElementsByClassName('element1')[0];
element.outerHTML("<div class = 'element3'> some other text</div>");

見る：

• http://help.dottoro.com/ljloliex.php
  
• http://help.dottoro.com/ljdkwhqf.php
  
  

注: を使用しているためgetElementsByClassName()、このソリューションは有効です (参照: http://caniuse.com/getelementsbyclassname ):

• Internet Explorer 9 以降
  
• Firefox 3+
  
• オペラ 9.5+
  
• クローム 4+
  
• サファリ 3.1+
  

Answer 2

テキストを置き換えるだけの場合はinnerText、ターゲット要素にプロパティを設定します。すべての HTML を挿入する場合はinnerHTML、ターゲット要素にプロパティを設定します。ターゲット要素自体を置き換えるには、 を使用できると思いますouterHTML。

Answer 3

あなたはすでに答えを持っていますが、次のことをお勧めします。

var newContent = '<div class = "element3"> some other text</div>',
    temp = document.createElement('div'),
    div1 = document.getElementsByClassName('element1')[0];

temp.innerHTML = newContent;

div1.parentNode.replaceChild(temp.firstChild, div1);​

JS フィドルのデモ。

基本的に、「新しいコンテンツ」がDOMノードではないという問題があったことを考えると、最も賢明な解決策は、単にDOMノードにすることです。もちろん、これにはクロスブラウザの使用に関する注意事項がありdocument.getElementsByClassName()ます。

以下は、サポートしていないブラウザーにフォールバックを提供するクロスブラウザー バージョンですdocument.getElementsByClassName()(IE 7 で動作しますが、他のバージョンは利用できません。これらのブラウザーのうち、条件付き評価を処理する可能性があります):

function findByClassName(classname, el) {
    if (!classname) {
        return false;
    }
    else {
        el = !el ? document.getElementsByTagName('body')[0] : el;
        var children = el.getElementsByTagName('*'),
            withClass = [];

        for (var i = 0, len = children.length; i < len; i++) {
            if (children[i].nodeType == 1) {
                var classes = children[i].className.split(/\s+/);
                for (var c = 0, leng = classes.length; c < leng; c++) {
                    if (classes[c] == classname) {
                        withClass.push(children[i]);
                    }
                }
            }
        }

        return withClass;
    }
}

var newContent = '<div class = "element3"> some other text</div>',
    temp = document.createElement('div'),
    div1 = document.getElementsByClassName ? document.getElementsByClassName('element1')[0] : findByClassName('element1')[0];

temp.innerHTML = newContent;

div1.parentNode.replaceChild(temp.firstChild, div1);​

JS フィドルのデモ。

参考文献:

• の互換性document.getElementsByClassName()。
• の互換性element.outerHTML。

Answer 4

DOMElementを別のものに置き換えるjsFiddleの例を次に示します。

<div class = "a">
<div class="element1">--</div>
  <div class="element2">--</div>
</div>

<div class="element3"> some other text</div>

var element = document.getElementsByClassName('element1')[0];
var replacement = document.getElementsByClassName('element3')[0];
element.parentNode.replaceChild(replacement, element);