Question

我想用新版本更新容器而不替换它。例如：

Container1：

<div id="container-one">
    <p>
        <webview src="http://i.stack.imgur.com/Ed1aw.jpg"></webview>
    </p>
    <p>
       Text
    </p>
</div>

container2的：

<div id="container-two">
    <p>
        Cool intro
        <webview src="http://i.stack.imgur.com/Ed1aw.jpg"></webview>
    </p>
    <p>
       Long text
    </p>
    <p>
       New Paragraph with text in it.
    </p>
</div>

Container1已更新：

<div id="container-one">
    <p>
        Cool intro
        <webview src="http://i.stack.imgur.com/Ed1aw.jpg"></webview>
    </p>
    <p>
       Long text
    </p>
    <p>
       New Paragraph with text in it.
    </p>
</div>

Container1.innerHTML = Container2.innerHTML很简单，但我不想重新加载我的网页视图，因此代码应检测现有div中的新div或更新内容，并在Container1中应用修改。

更新：

Container2是用户编辑的container1的新版本，因此Container2中可以包含任何内容：图片，链接，新段落。

我该怎么做？

Answer 1

我可能没有正确理解您的问题，但是通过在要替换的文本中添加id，并使用简单的javascript，您可以实现此目的。

<强> HTML

<div id="container-one">
    <p>
        <span id="inner-one-1"></span>
        <webview src="http://i.stack.imgur.com/Ed1aw.jpg"></webview>
    </p>
    <p>
       <span id="inner-one-2">Text</span>
    </p>
</div>

<div id="container-two">
    <p>
        <span id="inner-two-1">Cool intro</span>
        <webview src="http://i.stack.imgur.com/Ed1aw.jpg"></webview>
    </p>
    <p>
       <span id="inner-two-2">Long text</span>
    </p>
</div>

<button id="click">Click Me!</button>

<强> JS

document.getElementById("click").onclick = function() {
    document.getElementById("inner-one-2").innerHTML = document.getElementById("inner-two-2").innerHTML;
    document.getElementById("inner-one-1").innerHTML = document.getElementById("inner-two-1").innerHTML;
}

<强> DEMO HERE

Answer 2

您需要获取文本节点并替换内容，例如

$('button').on('click', function () {
    // this block is for not to update the webview
    // get the first text node
    var txt = $('#container-one > p:first').contents().first().get(0);

    if (txt.nodeType === 3) { // Node.TEXT_NODE
        txt.nodeValue = $('#container-two > p:first').text();
    }

    // update rest of the elements
    $('#container-two').children().each(function (i) {
        if (i !== 0 && $('#container-one').children()[i]) {
            $($('#container-one').children()[i]).html($(this).html());
        }
        if (!$('#container-one').children()[i]) {
            $('#container-one').append($(this).clone());
        }
    });
});

DEMO

Answer 3

请试一试。

var container_one = $("#container-one").children();
var container_two = $("#container-two").children();


$.each(container_one, function(index, element){
  var cont_one_html = $(this).html();
  var cont_two_html = $(container_two[index]).html();
  if(cont_one_html != cont_two_html){
    $(this).html(cont_two_html);
  }
});

请查看图片 enter image description here 以获取更多理解。

Answer 4

试一试，看看这是否适合你。

var first = $('container-one p:first');
first.html($('container-two p:first').html() + first.html());

$('container-one p:last').html($('container-two p:last').html());

Answer 5

使用此：

function update(s){
   document.getElementById("container-one").innerHTML=s.innerHTML;
}

setInterval(function(){
   update(document.getElementById("container-two"));
},1000);

这样做是每秒更新一次内容。

为了表明它可以处理动态内容，我已经使第二个div可编辑了。

演示：http://jsfiddle.net/5RLV2/2

使用JS或jQuery扩展两个容器

5 个答案: