javascript - 用javascript替换html内容

Question

问题:

我将如何用其他内容(使用 javascript)替换 html 元素及其内容？

详细说明我的意思:

如果我有如下html代码:

<div id="container">
    <div id="one" class="element">some text</div>
    <div id="two" class="element">some text</div>
    <div id="three" class="element">some text</div>
    <div id="four" class="element">some text</div>
</div>

我想替换 <div id="two" class="element">some text</div>与

<div id="a" class="element">some text</div>
<div id="b" class="element">some text</div>

结果如下:

<div id="container">
    <div id="one" class="element">some text</div>
    <div id="a" class="element">some text</div>
    <div id="b" class="element">some text</div>
    <div id="three" class="element">some text</div>
    <div id="four" class="element">some text</div>
</div>

我可以用 javascript 做什么？我知道我可以用一种骇人听闻的方法来做到这一点:

document.getElementById('container').innerHTML = 
    "<div id='one' class='element'>some text</div>" +
    "<div id='a' class='element'>some text</div>" +
    "<div id='b' class='element'>some text</div>" +
    "<div id='three' class='element'>some text</div>" +
    "<div id='four' class='element'>some text</div>";

但我认为可能有更简洁的方法，而不是仅仅为了用 2 替换 1 div 而替换所有东西。有什么想法吗？

Answer 1

由于您使用 jQuery 标记了您的问题，我假设使用 jQuery 的答案是合适的。

使用 jQuery 的 replaceWith 很容易做到这一点:

$("#container #two").replaceWith('<div id="a" ...');

参见此处:http://jsbin.com/dogikikefa/edit?html,js,output

---

注意你可以使用数组来传入多段html:

$("#container #two").replaceWith([
    '<div id="a" class="element">some replaced text</div>',
    '<div id="b" class="element">some replaced text</div>'
]);

我个人认为额外的括号或字符串连接更简洁。

http://jsbin.com/rodesabiru/1/edit?html,js,output