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做什么？ 我知道我可以用hacky方法做到这一点：

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

Answer 2

您可以使用replaceWith

$('#button').click(function(){
    $("#container #two").replaceWith( 
        ('<div id="a" class="element">some text</div>'),
           ('<div id="b" class="element">some text</div>') );
});

Answer 3

Vanilla JS

＆＃13;

var div_two = document.getElementById('two');

// Create Div A
var div_a = document.createElement('div');
div_a.appendChild( document.createTextNode('some text a') );
div_a.setAttribute('id','a');
div_a.className = 'element';

// Create Div B
var div_b = document.createElement('div');
div_b.appendChild( document.createTextNode('some text b') );
div_b.setAttribute('id','b');
div_b.className = 'element';

// Where replacement occurs
var parent = div_two.parentNode;
parent.replaceChild(div_b, div_two);  // Replace Two with B
parent.insertBefore(div_a, div_b);    // Insert A before B

＆＃13;

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

＆＃13;

jQuery肯定会为你节省更多的代码，所以如果你已经在使用它，你可以在这里看到 - 请参阅其他答案 - 但了解jQuery正在拯救你做什么很重要（ ergo首先学习香草

自动化

这演示了如何通过填充['a','b','c','d']数组来创建任意数量的元素。如果您想要不同的文本或其他元素，您可以轻松创建一个从（{ "a": { "textContent": "This is some value for this id" } }）拉出的对象（哈希表）。理想情况下，这可以存储在数据库中;虽然如果你以这种方式加载你的前端，你可能想要查看其他语言，如Angular或React。

＆＃13;

var target = document.getElementById('two'),
    parent = target.parentNode;

// Create elements
var new_divs = [];
['a','b','c','d'].forEach(id=>{
   let new_div = document.createElement('div');
   new_div.setAttribute('id', id);
   new_div.className   = 'element';
   new_div.textContent = 'some text ' + id;
  
   new_divs.unshift( new_div );
});


// Add to page
new_divs.forEach((div,pass)=>{
   if (pass==0)
     parent.replaceChild( div, target );  // first pass replace
   else
     parent.insertBefore( div, target );  // all others insert before the last
  
   target = div;
});

＆＃13;

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

＆＃13;

jQuery肯定会为你节省更多的代码，所以如果你已经在使用它，你可以在这里看到 - 请参阅其他答案 - 但了解jQuery正在拯救你做什么很重要（ ergo首先学习香草

用javascript替换html内容

3 个答案:

Vanilla JS

自动化