我在替换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，但完全没有结果=（
答案 0 :(得分：32)
由于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);
}
这就是全部
答案 1 :(得分：8)
使用jQuery，你可以这样做：
var str = '<td>1</td><td>2</td>';
$('#__TABLE__').replaceWith(str);
或者在纯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;
答案 2 :(得分：7)
因为你在谈论你的替换任何，并且还在元素的中间替换它，它变得比插入单个元素或直接删除和追加：
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>' );
演示：
通过使用我们临时div的.innerHTML，这将生成我们需要插入的TextNodes和Elements，而不需要任何努力。但不是插入临时div本身 - 这会给我们标记我们不想要的 - 我们可以扫描并插入它的孩子。
......或者使用jQuery及其replaceWith方法。
jQuery('#idTABLE').replaceWith('<blink>Why this tag??</blink>');
作为对上述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？ ：）
答案 3 :(得分：3)
首先删除表，然后将新替换添加到表的父对象。
查找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/
答案 4 :(得分：1)
如果你需要实际替换你从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）执行此操作，但它需要更多行代码，并且您的问题明确表示您要使用字符串。
答案 5 :(得分：1)
在这种情况下你的输入太模糊了。您的代码必须知道它是否应该按原样插入文本或解析出一些HTML标记（或以其他方式结束错误的HTML）。这是不必要的复杂性，您可以通过调整您提供的输入来避免这种复杂性。
如果乱码输入是不可避免的，那么如果没有一些复杂的解析（最好是在一个单独的函数中），你可能会得到一些不好的HTML（就像你在第二个例子中所做的那样......这是坏的，对吧？）。
我猜你想要一个函数将列插入到1行表中。在这种情况下，您的内容应作为数组传入（没有table，tr，td标记）。每个数组元素都是一列。
<table id="__TABLE__"><tr><td></td></tr></table>
使用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>
答案 6 :(得分：0)
使用属性“innerHTML”
以某种方式选择表格：
var a = document.getElementById('table, div, whatever node, id')
a.innerHTML = your_text
答案 7 :(得分：0)
idTABLE.parentElement.innerHTML = '<span>123 element</span> 456';
虽然这有效，但仍建议您使用getElementById：Do DOM tree elements with ids become global variables?
replaceChild如果您想要使用document.createElement和appendChild逐个元素地构建替代品，那么它会正常工作，但我不明白这一点