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属性,但它还没有crossbrowsered,所以我做了一些技巧,很奇怪,但很简单.

这是代码

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

使用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 3

因为你在谈论你的替换是什么,并且在元素的子元素的中间替换,它变得比插入单个元素,或直接删除和追加更棘手:

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？:)