我有替换html元素的一个问题。
例如，这里有一个表：
<table>
<tr>
<td id="idTABLE">0</td>
<td>END</td>
</tr>
</table>
（可以div的，跨度，任何东西）
而在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我们暂时股利，这将产生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 4:
你会先删除表，然后添加新的替换表中的父对象。
查找removeChild和appendChild
http://javascript.about.com/library/bldom09.htm
https://developer.mozilla.org/en-US/docs/DOM/Node.appendChild
编辑：jQuery的.append允许刺痛，HTML不删除标签： http://api.jquery.com/append/
Answer 5:
你在这种情况下，输入是太暧昧了。 你的代码都知道，如果它应该只是插入文本按原样或解析出一些HTML标签（或其他风与坏的HTML）。 这是不必要的复杂性，你可以通过调整你提供输入避免。
如果出现乱码输入是不可避免的，那么没有一些复杂的解析（最好是在一个单独的功能），你可能最终会与一些不好的HTML（就像你在你的第二个例子做......这是坏，对吧？）。
我猜你想要的功能，插入列到1行的表。 在这种情况下，您的内容应传递一个数组（不表，TR，TD标签）。 每个阵列元件将是一列。
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，然后更换的内容与代表你想要什么新的HTML字符串替换的innerHTML。 诀窍是第一台电池转换为字符串，所以你可以使用它在一个字符串替换方法。
我加了小提琴例如： 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
Answer 8:
idTABLE.parentElement.innerHTML = '<span>123 element</span> 456';
而这个工程，它仍然推荐使用getElementById ： 与ID则DOM树中的元素成为全局变量？
replaceChild将正常工作，如果你想要去的元素建立您的替换，元素，使用的麻烦document.createElement和appendChild ，但我不明白这一点。
文章来源: JS. How to replace html element with another element/text, represented in string?
