JS。如何用另一个元素/文本替换html元素，用字符串表示？ [英] JS. How to replace html element with another element/text, represented in string?

问题描述

例如，下面是一个表：

 <表> 
< 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元素< / span> 456 或< tr>< td> 123< / td> 或者任何东西）

如何用 str idTABLE




$ b $ p $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $'
< tr>
< td id =idTABLE> 0< / td>
< td> END< / td>
< / tr>
< / table>

成为：

 <表> 
< tr> 
< td> 1< / td> 
< td> 2< / td> 
< td> END< / td> 
< / tr> 
< / table> 
<！ -  str ='< td> 1< / td>< td> 2< / td>'; - > 
 
< table> 
< tr> 
 123文字
< 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 ，但根本没有任何结果=（

解决方案由于Jquery的replaceWith（）代码太庞大，棘手和复杂，这是我自己的解决方案。=）

最好的方法是使用outerHTML属性，但它没有被crossbrowsered，所以我做了一些技巧，很奇怪，但很简单。

这是代码

  var str ='< a href =http://www.com>要替换的项目< / a>'; //它可以是任何
 var Obj = document.getElementById（'TargetObject'）; //任何要完全替换的元素
 if（Obj.outerHTML）{//如果支持outerHTML 
 Obj.outerHTML = str; ///它简单地替换了整个元素，内容为str var 
} 
 else {//如果不支持outerHTML，则会出现一个奇怪的但是被浏览过的技巧
 var tmpObj = document.createElement （ DIV）; 
 tmpObj.innerHTML ='<！ - 这个数据应该被替换 - >'; 
 ObjParent = Obj.parentNode; // Okey，元素应该是父元素
 ObjParent.replaceChild（tmpObj，Obj）; //这里我们放置临时数据而不是我们的目标，所以我们可以找到它并将其替换为我们想要替换的
 ObjParent.innerHTML = ObjParent.innerHTML.replace（'< div>< ！ - 这个数据应该被替换 - >< / div>'，str）; 
} 
  

全部

I have a problem with replacing html elements.

For example, here is a table:

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

(it can be div, span, anything)

And string in JavaScript:

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

(It can be anything, 123 text, <span>123 element</span> 456 or <tr><td>123</td> or anything)

How can I replace element idTABLE with str?

So:

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

Becomes:

<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>' -->

I tried createElement, replaceChild, cloneNode, but with no result at all =(

解决方案

As the Jquery replaceWith() code was too bulky, tricky and complicated, here's my own solution. =)

The best way is to use outerHTML property, but it is not crossbrowsered yet, so I did some trick, weird enough, but simple.

Here is the code

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

That's all

这篇关于JS。如何用另一个元素/文本替换html元素，用字符串表示？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！