Replacing original div with same ID: replaceChild() not giving correct results

Question

Here is my code that works but isn't very practical:

var blank1 = document.getElementById("blank1");
var this_image_filename = "/rgsi/images/poi-" + image_id + "-1--4.jpg";
blank1.innerHTML = "<div id='blank1' onclick=displayImg('" + this_image_filename + "') >1</div>";

The issue with this is that if you use inspect element in Chrome you get:

<div id="blank1">
    <div id="blank1" onclick="displayImg('/rgsi/images/poi-64-1--4.jpg')">1</div>
</div>

which is not good at all.

I attempted to use replaceChild() as listed in this question here:

How to replace DOM element in place using Javascript?

but I keep getting:

Uncaught NotFoundError: Failed to execute 'replaceChild' on 'Node': The new child element is null.

So the question is: what is the simplest way to correctly do this?

Any input is appreciated.

If you're only changing an attribute, why replace the entire element ? — adeneo, Dec 18 '13 at 16:30

score 0 · Answer 1 · answered Dec 18 '13 at 16:33

0

You recreate your element inside itself.

I suppose you meant to do the following:

var blank1 = document.getElementById("blank1");
var this_image_filename = "/rgsi/images/poi-" + image_id + "-1--4.jpg";
blank1.onclick = function() { displayImg( this_image_filename ); }
blank1.innerHTML = "1";

answered Dec 18 '13 at 16:33

Majid Laissi

19,188
19
68
105

Why is this better? Please elaborate on your solution. – Felix Kling Dec 18 '13 at 16:34
@FelixKling I suppose this is what he meant to do. Not creating a div element, creating another div inside with the onclick function and same id.. – Majid Laissi Dec 18 '13 at 16:36
I understand that. But it might be good if you just explained, that instead of adding a new child, you just modify the existing element. It might be obvious for us that that this is what happens, but not necessarily for less experienced developers. – Felix Kling Dec 18 '13 at 16:44

score 0 · Answer 2 · answered Dec 18 '13 at 16:37

0

You must use UNIQUE id..

var blank1 = document.getElementById("blank1");
var this_image_filename = "/rgsi/images/poi-" + image_id + "-1--4.jpg";
blank1.innerHTML = "<div id='blank1_small' onclick=displayImg('" + this_image_filename + "') >1</div>";

And the html...

<div id="blank1">
        <div id="blank1_small" onclick="displayImg('/rgsi/images/poi-64-1--4.jpg')">1</div>
</div>

this could be right, but as @adeneo says, for change just one attribute, you can set this in JS

answered Dec 18 '13 at 16:37

kevpoccs

635
5
8

Right, understood, but doing `document.getElementById("blank1").onclick = displayImg('" + this_image_filename + "');` does not return the correct results. And the biggest thing is I don't want to create a new ID (idk if this is necessaribly bad or overbearing though). – Nubtacular Dec 18 '13 at 16:38
don't set the onclick in the html, but set it at the document.load, in JS – kevpoccs Dec 18 '13 at 16:39

score 0 · Answer 3 · edited Aug 24 '15 at 22:42

0

This did the trick:

document.getElementById("blank1").onclick = function() {
    var this_image_filename = "/rgsi/images/poi-" + image_id + "-1--4.jpg";
    displayImg(this_image_filename);          
}

edited Aug 24 '15 at 22:42

halfer

19,824
17
99
186

answered Dec 18 '13 at 17:44

Nubtacular

1,367
2
18
38

Replacing original div with same ID: replaceChild() not giving correct results

3 Answers3