javascript - JS。html要素を文字列で表される別の要素/テキストに置き換える方法は?

Question

HTML要素の置換に問題があります。

たとえば、次の表があります。

<table>
    <tr>
        <td id="idTABLE">0</td>
        <td>END</td>
    </tr>
</table>

（div、span、何でもかまいません）

JavaScript の文字列:

var str = '<td>1</td><td>2</td>';

(何でも123 text、、、<span>123 element</span> 456または<tr><td>123</td>何でもかまいません)

idTABLE要素をに置き換えるにはどうすればよいstrですか?

そう：

<table>
    <tr>
        <td id="idTABLE">0</td>
        <td>END</td>
    </tr>
</table>

なる:

<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>END</td>
    </tr>
</table> 
<!-- str = '<td>1</td><td>2</td>'; -->

<table>
    <tr>
        123 text
        <td>END</td>
    </tr>
</table>
<!-- str = '123 text' -->

<table>
    <tr> 
        <td>123</td> 
        <td>END</td>
    </tr>
</table>
<!-- str = '<td>123</td>' -->

createElement、replaceChild、を試しcloneNodeましたが、結果はまったくありません =(

Answer 1

Jquery replaceWith() コードはかさばり、扱いにくく、複雑だったので、ここに私自身の解決策を示します。=)

最善の方法は、outerHTML プロパティを使用することですが、まだクロスブラウザー化されていないため、奇妙ではありますが簡単なトリックを行いました。

ここにコードがあります

    var str = '<a href="http://www.com">item to replace</a>'; //it can be anything
    var Obj = document.getElementById('TargetObject'); //any element to be fully replaced
    if(Obj.outerHTML) { //if outerHTML is supported
        Obj.outerHTML=str; ///it's simple replacement of whole element with contents of str var
    }
    else { //if outerHTML is not supported, there is a weird but crossbrowsered trick
        var tmpObj=document.createElement("div");
        tmpObj.innerHTML='<!--THIS DATA SHOULD BE REPLACED-->';
        ObjParent=Obj.parentNode; //Okey, element should be parented
        ObjParent.replaceChild(tmpObj,Obj); //here we placing our temporary data instead of our target, so we can find it then and replace it into whatever we want to replace to
        ObjParent.innerHTML=ObjParent.innerHTML.replace('<div><!--THIS DATA SHOULD BE REPLACED--></div>',str);
    }

それで全部です

Answer 2

置換が何かであり、要素の子の途中で置換することについて話しているため、単一の要素を挿入したり、直接削除して追加したりするよりも注意が必要です。

function replaceTargetWith( targetID, html ){
  /// find our target
  var i, tmp, elm, last, target = document.getElementById(targetID);
  /// create a temporary div or tr (to support tds)
  tmp = document.createElement(html.indexOf('<td')!=-1?'tr':'div'));
  /// fill that div with our html, this generates our children
  tmp.innerHTML = html;
  /// step through the temporary div's children and insertBefore our target
  i = tmp.childNodes.length;
  /// the insertBefore method was more complicated than I first thought so I 
  /// have improved it. Have to be careful when dealing with child lists as  
  /// they are counted as live lists and so will update as and when you make
  /// changes. This is why it is best to work backwards when moving children 
  /// around, and why I'm assigning the elements I'm working with to `elm` 
  /// and `last`
  last = target;
  while(i--){
    target.parentNode.insertBefore((elm = tmp.childNodes[i]), last);
    last = elm;
  }
  /// remove the target.
  target.parentNode.removeChild(target);
}

使用例:

replaceTargetWith( 'idTABLE', 'I <b>can</b> be <div>anything</div>' );

デモ：

• http://jsfiddle.net/97H5Y/1/

.innerHTML一時的な divを使用することで が生成され、苦労せずに挿入する必要がありますTextNodes。Elementsただし、一時的な div 自体を挿入するのではなく (これにより不要なマークアップが作成されます)、その子をスキャンして挿入することができます。

...それか、jQuery とそのreplaceWithメソッドの使用を検討してください。

jQuery('#idTABLE').replaceWith('<blink>Why this tag??</blink>');

2012/11/15更新

上記の EL 2002 のコメントへの応答として:

常に可能であるとは限りません。たとえば、createElement('div')そのinnerHTMLを に設定すると<td>123</td>、このdivは<div>123</div>（jsは不適切なtdタグを捨てます）

上記の問題は明らかに私の解決策も無効にします-それに応じて上記のコードを更新しました（少なくともtd問題については）。ただし、特定の HTML では、何をしてもこれが発生します。すべてのユーザー エージェントは、独自の解析ルールを使用して HTML を解釈しますが、ほとんどすべてのユーザー エージェントが不適切な HTML を自動修正しようとします。あなたが話していることを正確に達成する唯一の方法(いくつかの例で)は、HTML を DOM から完全に取り出し、それを文字列として操作することです。これは、次のマークアップ文字列を実現する唯一の方法です(jQuery もこの問題を回避できません)。

<table><tr>123 text<td>END</td></tr></table>

次に、この文字列を取得して DOM に挿入すると、ブラウザによっては次のようになります。

123 text<table><tr><td>END</td></tr></table>

<table><tr><td>END</td></tr></table>

残っている唯一の質問は、そもそもなぜ壊れた HTML を実現したいのかということです。:)

Answer 3

jQuery を使用すると、次のことができます。

var str = '<td>1</td><td>2</td>';
$('#__TABLE__').replaceWith(str);

http://jsfiddle.net/hZBeW/4/

または純粋なJavaScriptで：

var str = '<td>1</td><td>2</td>';
var tdElement = document.getElementById('__TABLE__');
var trElement = tdElement.parentNode;
trElement.removeChild(tdElement);
trElement.innerHTML = str + trElement.innerHTML;

http://jsfiddle.net/hZBeW/1/

Answer 4

最初にテーブルを削除してから、テーブルの親オブジェクトに新しい置換を追加します。

見上げremoveChildてappendChild

http://javascript.about.com/library/bldom09.htm

https://developer.mozilla.org/en-US/docs/DOM/Node.appendChild

編集：jQuery .appendは、タグを削除せずにsting-htmlを許可します：http：//api.jquery.com/append/

Answer 5

この場合の入力はあいまいすぎます。コードは、テキストをそのまま挿入するか、一部の HTML タグを解析するか (そうしないと、不適切な HTML になってしまうか) を認識する必要があります。これは不要な複雑さであり、提供する入力を調整することで回避できます。

入力の文字化けが避けられない場合は、洗練された解析 (できれば別の関数で) を行わないと、悪い HTML になってしまう可能性があります (2 番目の例のように...これは悪いことですよね?)。

1行のテーブルに列を挿入する関数が必要だと思います。この場合、コンテンツを配列として渡す必要があります (table、tr、td タグなし)。各配列要素は 1 列になります。

HTML

<table id="__TABLE__"><tr><td></td></tr></table>

JS

簡潔にするためにjQueryを使用しています...

function insert_columns (columns)
{
    var $row = $('<tr></tr>');

    for (var i = 0; i < columns.length; i++)
        $row.append('<td>'+columns[i]+'</td>');

    $('#__TABLE__').empty(); // remove everything inside

    $('#__TABLE__').append($row);
}

それで...

insert_columns(['hello', 'there', 'world']);

結果

<table id="__TABLE__"><tr><td>hello</td><td>there</td><td>world</td></tr></table>

Answer 6

DOM から選択している td を実際に置き換える必要がある場合は、最初に parentNode に移動し、内容を置き換える必要があります。秘訣は、first-table-cell を文字列に変換して、文字列置換メソッドで使用できるようにすることです。

フィドルの例を追加しました: http://jsfiddle.net/vzUF4/

<table><tr><td id="first-table-cell">0</td><td>END</td></tr></table>

<script>
  var firstTableCell = document.getElementById('first-table-cell');
  var tableRow = firstTableCell.parentNode;
  // Create a separate node used to convert node into string.
  var renderingNode = document.createElement('tr');
  renderingNode.appendChild(firstTableCell.cloneNode(true));
  // Do a simple string replace on the html
  var stringVersionOfFirstTableCell = renderingNode.innerHTML;
  tableRow.innerHTML = tableRow.innerHTML.replace(stringVersionOfFirstTableCell,
    '<td>0</td><td>1</td>');
</script>

ここでの複雑さの多くは、DOM メソッドと文字列メソッドを混在させていることです。アプリケーションで DOM メソッドが機能する場合は、それらを使用することをお勧めします。 純粋な DOM メソッド (document.createElement、removeChild、appendChild) を使用してこれを行うこともできますが、より多くのコード行が必要であり、質問では文字列を使用したいと明示的に述べています。

Answer 7

属性「innerHTML」を使用します

どういうわけかテーブルを選択します：

var a = document.getElementById('table, div, whatever node, id')
a.innerHTML = your_text