javascript - Diff two containers with JS or jQuery - Stack Overflow

admin管理员组

文章数量:1026389

I want to update a container with a new version without replacing it. For example:

Container1:

<div id="container-one">
    <p>
        <webview src=".jpg"></webview>
    </p>
    <p>
       Text
    </p>
</div>

Container2:

<div id="container-two">
    <p>
        Cool intro
        <webview src=".jpg"></webview>
    </p>
    <p>
       Long text
    </p>
    <p>
       New Paragraph with text in it.
    </p>
</div>

Container1 updated:

<div id="container-one">
    <p>
        Cool intro
        <webview src=".jpg"></webview>
    </p>
    <p>
       Long text
    </p>
    <p>
       New Paragraph with text in it.
    </p>
</div>

A Container1.innerHTML = Container2.innerHTMLwould be simple but I don't want to reload my webview so the code should detect new divs or updated content in existing divs and apply the modifications in Container1.

UPDATE :

Container2 is a new version of container1 edited by a user, so Container2 can have anything in it: images, links, new paragraphs.

How can I do this?

I want to update a container with a new version without replacing it. For example:

Container1:

<div id="container-one">
    <p>
        <webview src="https://i.sstatic/Ed1aw.jpg"></webview>
    </p>
    <p>
       Text
    </p>
</div>

Container2:

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

Container1 updated:

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

A Container1.innerHTML = Container2.innerHTMLwould be simple but I don't want to reload my webview so the code should detect new divs or updated content in existing divs and apply the modifications in Container1.

UPDATE :

Container2 is a new version of container1 edited by a user, so Container2 can have anything in it: images, links, new paragraphs.

How can I do this?

• javascript
• jquery
• diff
• innerhtml

Share Improve this question Follow edited Oct 29, 2021 at 7:22 Ahmet Emre Kilinc 7,0031919 gold badges3636 silver badges4747 bronze badges asked Mar 29, 2014 at 10:28 Armand GrilletArmand Grillet 3,39755 gold badges3535 silver badges6262 bronze badges 2

• 1 why don't you just wrap the texts into id'd containers (div, span, whatever) and do it that way? – benomatis Commented Mar 29, 2014 at 10:32
• but you said in your question that the paragraphs are text... have I misunderstood something...? Have a look at my answer... – benomatis Commented Mar 29, 2014 at 10:41

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

I might have not understood your question correctly, but by adding an id to the text that you want to replace, and using simple javascript, you can achieve this.

HTML

<div id="container-one">
    <p>
        <span id="inner-one-1"></span>
        <webview src="https://i.sstatic/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="https://i.sstatic/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

please try it.

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);
  }
});

please have a look on image for more understanding.

you need to get the text node and replace the content, like

$('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

Have a try and see if this works for you.

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());

Use this:

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

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

What this does is it updates the content once every second.

To show that it can handle dynamic content, I have made the second div editable.

Demo:http://jsfiddle/5RLV2/2

I want to update a container with a new version without replacing it. For example:

Container1:

<div id="container-one">
    <p>
        <webview src=".jpg"></webview>
    </p>
    <p>
       Text
    </p>
</div>

Container2:

<div id="container-two">
    <p>
        Cool intro
        <webview src=".jpg"></webview>
    </p>
    <p>
       Long text
    </p>
    <p>
       New Paragraph with text in it.
    </p>
</div>

Container1 updated:

<div id="container-one">
    <p>
        Cool intro
        <webview src=".jpg"></webview>
    </p>
    <p>
       Long text
    </p>
    <p>
       New Paragraph with text in it.
    </p>
</div>

A Container1.innerHTML = Container2.innerHTMLwould be simple but I don't want to reload my webview so the code should detect new divs or updated content in existing divs and apply the modifications in Container1.

UPDATE :

Container2 is a new version of container1 edited by a user, so Container2 can have anything in it: images, links, new paragraphs.

How can I do this?

I want to update a container with a new version without replacing it. For example:

Container1:

<div id="container-one">
    <p>
        <webview src="https://i.sstatic/Ed1aw.jpg"></webview>
    </p>
    <p>
       Text
    </p>
</div>

Container2:

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

Container1 updated:

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

A Container1.innerHTML = Container2.innerHTMLwould be simple but I don't want to reload my webview so the code should detect new divs or updated content in existing divs and apply the modifications in Container1.

UPDATE :

Container2 is a new version of container1 edited by a user, so Container2 can have anything in it: images, links, new paragraphs.

How can I do this?

• javascript
• jquery
• diff
• innerhtml

Share Improve this question Follow edited Oct 29, 2021 at 7:22 Ahmet Emre Kilinc 7,0031919 gold badges3636 silver badges4747 bronze badges asked Mar 29, 2014 at 10:28 Armand GrilletArmand Grillet 3,39755 gold badges3535 silver badges6262 bronze badges 2

• 1 why don't you just wrap the texts into id'd containers (div, span, whatever) and do it that way? – benomatis Commented Mar 29, 2014 at 10:32
• but you said in your question that the paragraphs are text... have I misunderstood something...? Have a look at my answer... – benomatis Commented Mar 29, 2014 at 10:41

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

I might have not understood your question correctly, but by adding an id to the text that you want to replace, and using simple javascript, you can achieve this.

HTML

<div id="container-one">
    <p>
        <span id="inner-one-1"></span>
        <webview src="https://i.sstatic/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="https://i.sstatic/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

please try it.

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);
  }
});

please have a look on image for more understanding.

you need to get the text node and replace the content, like

$('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

Have a try and see if this works for you.

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());

Use this:

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

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

What this does is it updates the content once every second.

To show that it can handle dynamic content, I have made the second div editable.

Demo:http://jsfiddle/5RLV2/2

本文标签： javascriptDiff two containers with JS or jQueryStack Overflow